Giter Site home page Giter Site logo

next-amazona-v2's Introduction

Build Full-ECommerce By Next.js 13+, App Router, Server Components and Actions

Tech Nextjs 13+, Server Components & Actions, Route Handler
UI Tailwind, DaisyUI, Chart.js
Database MongoDB, Mongoose
Payment PayPal, Stripe
Deployment Github, Vercel, MongoDB Atlas
Authentication Auth.js, Google Auth
Others Cloudinary, Zustand, SWR

next amazona v2

Resources

What you will learn

  • NextJS basics like setting up project, creating pages and data fetching
  • NextJS advanced topics like app router, server component & actions, image optimization,
  • Tailwind CSS and DaisyUI framework to build responsive website using custom theme, animation and carousel
  • ReactJS including decomposing components, state management with Zustand and data fetching using swr
  • Auth.js package to authenticate customers and admin users
  • MongoDB and Mongoose to save and retrieve data like products, orders and users
  • PayPal developer api to make online payment
  • Deploy web applications on servers like Vercel and Netlify

Full Course

Get this course by 90% discount on Thinkific: https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=SAVE90

Run Locally

  1. Clone repo

     $ git clone [email protected]:basir/next-amazona-v2.git
     $ cd next-amazona-v2
  2. Create .env File

    • duplicate .env.example and rename it to .env
  3. Setup MongoDB

    • Local MongoDB
      • Install it from here
      • In .env file update MONGODB_URI=mongodb://localhost/amazona
    • OR Atlas Cloud MongoDB
  4. Install and Run

      npm install
      npm run dev
  5. Seed Data

  6. Admin Login

Promo

Welcome to version 2 of next.js amazona. it is coding course to build a full functional ecommerce website like amazon using next.js lastest features like App router, sever components and actions and route handler.

Lessons

  1. Introduction
  2. Install Tools
  3. Create Next App
  4. Publish to Github
  5. List Products
    1. create product type
    2. add data.ts
    3. add images
    4. render products
  6. Create Product Details
    1. create product page
    2. create 3 columns
    3. show image in first column
    4. show product info in second column
    5. show add to cart action on third column
    6. add styles

next-amazona-v2's People

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.