Next Js Full Stack Ecommerce From Scratch.

This is a full stack Nextjs app with a beautiful and amazing design ui.

Our goal

• Build beautiful Frontend Design UI & High quality code
• Build Strong Api.
• Test with Jest and Cypress.

Core features

• Learn how to start a next js project from scratch
• Learn how to set SEO to Next Js Project
• Learn how to set up Tailwind Css and Next Js Project
• Learn how to create React components with Tailwind CSS
• Learn how to create React components with framer motion
• Learn how to Test your app with Jest, Cypress
• Learn how to build consume API

Quick start

To spin up this example loccaly, follow these steps

Clone

Use the git clone CLI to clone template directly to your machine

Set up env file

1. You will need to setup Next js Next Js

    NEXT_PUBLIC_SERVER_URL=

Run project on local

    npm install
    npm run dev

Project Dev Steps

1. Environment Setup

   Create a env file on the root of project PUT THIS INSIDE

    NEXT_PUBLIC_SERVER_URL=http://localhost:3000
    NEXT_PUBLIC_API_URL=https://carrefour-theta.vercel.app
    NEXTAUTH_SECRET=NEXTAUTH_SECRET

    # Stripe integration 
    NEXT_PUBLIC_STRIPE_CLIENT_KEY=
    STRIPE_SECRET_KEY=

    # Paypal integration 
    NEXT_PUBLIC_PAYPAL_CLIENT_ID=
    PAYPAL_CLIENT_SECRET=

2. Project Folder Structure

3. Setup Eslint

4. Setup Jest

5. Setup Cypress

6. Create Pipeline CI CD

7. Setup ShadCn and Some Libraries

8. Setup Frontend UI Kit ( Colors - Fonts - Container )

9. Create Home UI

10. Create Product page UI

11. Create Product Detail UI

12. Create Cart UI

13. Create Checkout UI

14. Create Payment UI

15. Create Dashoard UI

16. Fixing bug

17. Test Jest

18. Test Cypress

19. Deploy

Questions

If you have any issues or questions [Send a comment] (https://www.youtube.com/@sylvaincodes593) on Youtube or reach out me on Discord or for private messages on patreon.com/sylvaincodes