Git Product home page Git Product logo

nextjs-amazona-final's Introduction

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

nextjs-amazona-final's People

Contributors

basir avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.