/nextjs-amazona-final

Primary LanguageJavaScript

Amazona Final

Here I'm gonna have an introduction to nextjs-amazona course.

We are going to build a fully-functional ecommerce website using NextJS. This course is for beginners and advance developers

if you are new to web development the first 40 lessons of this course are for you.

by the end of these lessons you will build following features:

  • Product List in Home Page and Product Details in Details Screen
  • Product Category in sidebar
  • Review Products and Show Ratings
  • Search Products and Search Screen
  • Implement add to cart product and create shopping cart screen
  • Manage users by creating sign up and sign in screen
  • Checkout wizard to get shipping info, payment method and preview order
  • Manage user profile and show order history of users By the end of beginner part you are junior developer will learn:
  • NextJS to create a fully functional website using create-next-app
  • Material UI to design website based on the best practice UI/UX
  • React Context to manage state of application is a predictable way
  • NextConnect to build an api in NextJS
  • MongoDB and Mongoose to save and retrieve data in the database
  • JSonWebToken to authenticate users
  • Paypal checkout api to make payment for the order
  • Vercel deployment service to deploy website on the cloud So, you are junior developer will build a fully functional ecommerce website like amazona and you can put it on your portfolio website or present it as a side project for you next job interview and hopfully get your dream job.

if you are an advanced developer the last 30 lessons satisfy your needs:

NextJS Ecommerce Website Like Amazon

Lessons

  1. Introduction
    1. what is this course about
    2. who are the audiences
    3. what do you learn
    4. what are pre-requisite
  2. Install Development Tools
    1. Google Chrome
    2. NodeJS, MongoBD and Git
    3. VS Code and Extensions
  3. Create Next App
    1. run npx create-next-app --use-npm
    2. explain folder and file structure
  4. Push to Github and Deploy on Vercel
    1. Create github account and repo
    2. connect to github repo
    3. commit and push changes to github
  5. Add Material UI
    1. install material ui
    2. add _app.js
    3. add _document.js
    4. set stylesheet
    5. add header
  6. Create Home Page
    1. Create products array
    2. import in index.js
    3. render products
  7. Install eslint
    1. install eslint on vs code extensions
    2. run npm install eslint
    3. run ./node_modules/.bin/eslint --init
    4. accept default answers