Skip to main content

Creating the Login and Signup Page: Part 1


It always seems impossible until it's done.
Namaste developers,
Welcome to my third post on the series of creating a website from scratch. We will be developing front-end and back-end for our Login and Sign-up pages. This login will be user specific, but we may extend its functionality by adding vendor login inside this component which is our future perspective, but should be kept in mind while developing. We need to set up our environment where we will be coding in angular. For this, we will be using Visual Studio Code.
To Setup the environment, follow this blog Guide for Setting up angular link.
After following the above mentioned links, I hope you are all set and ready to start writing your first piece of code.

User Interface for Sign-up:

We will be developing our user interface in Angular. Angular gives us the flexibility to create each of our functionalities as a separate component. This separate component will have its own typescript file and CSS file for providing dynamic as well as user specific style to the component. So, when I work on signup component, I will create sign-up specific styles and variables which will be unknown to other components.

Steps to create the UI project

  1. Open your VS Code and from menu bar > select Terminal > New terminal.
  2. If not already, install angular CLI using npm install command in your terminal which will appear at the bottom of the VS code UI.
  3. Create a folder from the terminal using native command: mkdir blogger and then navigate inside that folder using command: cd blogger
  4. Now that we are inside our working folder, we will create our project using command: ng new BikeRentalUI
  5. We will be prompted with a question whether we would like to add angular routing?(y/N).Type y to this. Its relevance will be explained in upcoming blogs.
  6. We will be prompted with another question -> Which stylesheet format would you like to use? Choose SCSS, which is a superset of css with some added functionalities such as variable declaration etc.
  7. Choose file > Open Folder and navigate to the our blogger folder and open it. The view of the Angular UI after opening the folder would be like the one mentioned in the image below.
  8. From this view on the left pane, we can see a file named package.json. This file contains the name of all the packages which will be downloaded. We can change the packages according to our requirements. But here we are going to keep it as default.
  9. To install the packages, type command: npm install
  10. After all the packages are installed, type command: ng serve -o to run the application on your default browser which would appear something like the image shown below.
In the next blog, we will create our sign-up component and start designing it to send data entered by the user to our backend, where it will be stored in our database.
Stay Home Stay Safe !
Labels:

Comments

Post a Comment

Popular posts from this blog

My Quarantine "Efforts"

A true relationship is two imperfect people refusing to give up on each other. – Them This blog is on relationships and of course a bit of coding, otherwise it would be stupid to put it here anyways. My girlfriend and I have been having some issues lately regarding the term "Efforts". Now when I put it in front of any of my friends, They have the same reply "Efforts" and when asked what efforts are? … Nothing. I get a supposedly deep answer - Efforts come from within. What does that even mean?. So I tried some stuff to get a response from her. Well for some context we came in relationship on 28 february,2020 and guess when the lockdown started in India. Don't guess, you may as well google it. It was not even a month before the lockdown began and we flew back home. She lives more than 1500km from my state. But you know sometime you just meet the right person and you just know. We knew we had to fight this as we had so much left to say to each ot...
3 comments
Read more

Developing an app with react native and firebase - firestore - Part 1

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. –John F. Woods Let's face it, we are two years into work from home, quarantined from the outside and this makes me wonder that how lucky I am as an engineer to be able to have so many domains open for me to work on, with which I could eventually make money, help others. In other words, it gives me the power to bring a change. I just can't think of a problem where technology cannot help. As soon as I find a problem in minutes my mind starts to work on how it can be solved technically. I think this development is what our college provides us with, to open our technical aspects. Today, I will be talking about react-native and firestore, making app development a little painless and fast. If we are looking to solve a simple everyday problem and want an app to do it for us, an app that is not very complex - react native is the way to go. So,...
Post a Comment
Read more

What The Hell Is gRPC?

Time is the longest distance between two places. ― Tennessee Williams  If you are a software engineer and you work on websites or any other software which is in high demand by your consumer, but you see that some parts of your application say the products page gets higher demand than any other services you provide at some point of time or let's say you want to loosely couple your application for your application to be developed more easily and flexibly.  These are a few use cases, there are many more. We are seeing a trend in the industry getting more aligned toward following microservices patterns while building the application. The When, Why, Where, and How parts of microservices can be easily found on the internet.  Here I want to talk more about some new technologies which have become an integral part when we talk about microservices. So this blog would be more fruitful for people who know the  When, Why, Where, and How  parts. Today, I will talk a...
Post a Comment
Read more