First thing first

Thank you for Jipeng Huang and his project c-shopping

C-Shopping is an open-source project, and we welcome more developers to join our community.

Link of the completed project: https://github.com/DawnGate/relearn/tree/miniapp/mini-app/ecommerce-frontend

The technology

• Node (18)
• Mongodb with mongoose
• Nextjs (14)
• Redux toolkit with redux rtk
• tailwindcss + headlessui
• yup for form validate
• joi for backend validate schema
• jwt for verify
• husky, lintstaged, eslint, prettier, commitlint
• typescript

The main features

• Register/Login
• Home page
• Cart page - Not done
• product - Not done
• category - Not done

Somethings I like

• After translate from Chinese to English, I like how the project look, the UI/UX is so good, smooth and easy for using as a ecommerce app
• The structure, when I came with this project, I only think about redux, but after doing a little of stuff of settings, special with typescript. I can see the beautiful of structure of this app. Every components will in one file of index.ts, where you can easily to access and figure where it is. The structure forcus on overral structure, where store with slices and services, Modal, util, components - all components ==. This structure easy using for middle to small size project.
• Every file only contain < 200 lines of code, easy to read and code splitting

Somethings I don't like

• This project setting with js, so many bug can occur
• Not include test for frontend
• Not follow best practice with nextjs, mongoose or redux

Somethings I done

• setup with typescript
• setup code consistency conventional
• Done Login/SignUp, and layout for client ( header, footer)
• I will comeback later to completed it, but current it take me 10 days, out of 7 days per project so I decided to stop it

Blog and resources I read

Demo

| pic: demo Homepage |