DEV Community

Cover image for E-Commerce with Angular & Firebase, part one.
Ayush
Ayush

Posted on

E-Commerce with Angular & Firebase, part one.

Hello guys,
Long time no post yet, sorry for that, I'm back with this project idea for beginners as well as advanced. I came up with a blog series where we'll cover all the build functionality that an e-commerce site has, and try to make it a production level of quality.
So this is the first part as part one, in this blog, I'll cover the installation and packages that we'll gonna use in this project.

Which policy is the best ?
Honesty āŒ
Documentation āœ…

Pre-requisites šŸ¤“:

  1. Angular 17.
  2. Firebase.
  3. daisyUi.
  4. Design patterns.

Installation šŸ“–:

First start with Angular CLI installation, if you don't have the Angular CLI installed in your system, then you should run this command to install it globally in your system.

npm i -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

Or if you've already installed it and it is an older version, that needs an upgrade ?, then you should run this command to update your CLI and core of Angular.

npm i -g @angular/cli@17
Enter fullscreen mode Exit fullscreen mode
npm i -g @angular/core@17
Enter fullscreen mode Exit fullscreen mode

You can follow the main documentation too, read docs.

Create a new angular project:

If you know this step then you can skip that step to create a new angular project, if you're new to angular then sir, follow me or you can follow the main documentation.
To create a new project, open your destination folder, open the terminal or command prompt, and run this command to create a new angular project folder.

ng new ecommerce --routing --style=css --no-standalone
Enter fullscreen mode Exit fullscreen mode

Hit the enter key and another option will ask you, whether you want SSR (Server-side rendering) or not?, so type n for no, and hit enter, It'll create a new ecommerce folder of the angular project.

Install packages:

Open this project in your text editor or Visual Studio Code, open the terminal panel of Visual Studio Code, and run this command to install the packages, that we'll gonna use to build our e-commerce project.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
npm i -D daisyui@latest
npm install firebase
Enter fullscreen mode Exit fullscreen mode

Run these commands one by one, so that every package will installed properly, if you know how to install all packages in one shot, then its beneficial to you and for me too, because I don't know, so comment down in the comment section so that I wanna know, what'll be the command to achieve it one single command.
Now see you and I have finished the pre-requisites for this blog post, just one thing is left, and that's the design patterns, we'll gonna have that in my upcoming blog posts.

Top comments (0)