My First Internship as a Course and Project
--
Hello Guys,
I hope you all are safe and sound.
I started my internship program after our college provided options due to this pandemic going on. The options were Inhouse means building project from given topics, Work from home if any company provides and Course with a Project.
So, I choose a course from Coursera. The Course itself was a part of a specialization called Full Stack Web-Development. I have completed two courses in that specialization. First course was Front-End Web UI Framework Tools using Bootstrap 4 and Building a website using JavaScript framework using Angular. Each course are divided into 4 or 5 week span and I am building a Restaurant website following the course.
Starting the Course in week 1, Setting up Node.js and npm(Node Package Manager). Installing all required things like lite-server for hosting the website, angular-cli, materials, modules, etc. I have used SCSS(Sassy CSS) file for using CSS in my website. We can generate component in Node.js and For my restaurant website I am using classes for different items like I am creating classes of item like dishes that holds different attributes that dishes have like id, name, image, etc. and same I have created items for Leaders, Promotions, etc. Then after in the menu component ts(typescript) file I have created the array of dishes that holds different dishes served by restaurant. Then updated the menu component html file so it will represent the dishes in menu when you navigate from navigation bar and added css as required. In Week 1 Assignment part I have to add things as follows:
So, this occurs when a dish selected among the menus and shows about dishes, the comments and reviews.
In week 2, Firstly in above task the user can’t add comment to the dish that he selects. So, for that I have created component of comment like what its attributes are, etc. From this part I started adding services for serving each component to its required place. The main thing that helps each service to reach its destination we use angular routing. And generated the component for header and footer because it is gonna be same for all menus, it will make it easy for us. For routing I created a routes.ts file and specified paths for each menu and imported it. In the Assignment 2, We had task like adding the Corporate leaders from leaders component and then Adding featured corporate leader on home page shown as follows:
Added the leadership service for showing the details of leaders in our restaurant and fetched the featured leaders at home page.
In 3rd week, I had came across dialog view in angular, a dialog box appears containing Login-Form itself whenever you click on login button. Added the validations to the form and added error messages. Created a feedback form for the customers in contact us tab. Using of Javascript promises and reconfiguring services for returning this promises. Adding the time delay and showing animation for that time like still…loading. Now, I starting operating the services using observables and obtaining data through subscribing to the observables are returned from the services. In Assignment 3, I have to create a interface through which you can add comment and rate the various dish out of 5 by just selecting the dish with various validations. The comment adds to the various default comments at the same time when you submit it as shown as follows:
Created a form for submitting comments with validations.
In the last week, I had to set up the json-server for serving the required items like images, etc. For using the items stored in the json-server, I had to import the Http Client Module and used this base URL wherever I had to fetch the images. For Error handling, I have used the error message that are served as the error messages types. In this part for better user experience I have added animations like whenever a tab is changed you can see animation.And as the part of assignment I have to create a Feedback form in a way that when you submit it a animation should occur showing submitting form. Then for some time it shows you details that you have submitted and after some delay the form reappears.
Adding the feedback form with proper validations, animations and a feature that when you submit it, it will show you the glance of your submitted details.
The Website pages are shown as below but I will not be able to show animation that I have used:
The home page will show the featured dishes, promoted dishes and the featured leader.
Shows the login form that lets you login.
It shows about the restaurant like it’s history, Facts at glance, A quote and fetched the corporate leaders.
It shows different dishes served by the restaurant and shows details about dishes by choosing them.
You can see the default comments and the last comment that was added through the comment form.
Shows the details for visiting the restaurant or even can be booked online and the feedback form for making changes as people feels about it.
The github link of my project as follows:
