Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sylvaincodes/youtube_ecommerce
A full ecomerce project built with nextjs for education on youtube
https://github.com/sylvaincodes/youtube_ecommerce
framer-motion mongodb nextjs react redux redux-toolkit tailwindcss typescript
Last synced: 1 day ago
JSON representation
A full ecomerce project built with nextjs for education on youtube
- Host: GitHub
- URL: https://github.com/sylvaincodes/youtube_ecommerce
- Owner: sylvaincodes
- Created: 2024-08-03T18:15:39.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-08-24T07:26:23.000Z (3 months ago)
- Last Synced: 2024-08-24T15:54:13.764Z (3 months ago)
- Topics: framer-motion, mongodb, nextjs, react, redux, redux-toolkit, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://youtube-ecommerce.vercel.app
- Size: 3.81 MB
- Stars: 14
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 ](https://nextjs.org)
```bash
NEXT_PUBLIC_SERVER_URL=
```
### Run project on local
```bash
npm install
npm run dev
```
## Project Dev Steps
1. Environment Setup
Create a env file on the root of project
PUT THIS INSIDE
```bash
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
7. Create Pipeline CI CD
8. Setup ShadCn and Some Libraries
9. Setup Frontend UI Kit ( Colors - Fonts - Container )
10. Create Home UI
11. Create Product page UI
12. Create Product Detail UI
13. Create Cart UI
14. Create Checkout UI
15. Create Payment UI
16. Create Dashoard UI
17. Fixing bug
18. Test Jest
19. Test Cypress
20. 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](https://discord.gg/aGer8EX9) or for private messages on [patreon.com/sylvaincodes](https://www.patreon.com/sylvaincodes)