Shoppingify App

Shopping list management with purchase stats.

How to run this program?

Codesandbox Setup

• Step 1:

  

  Wait for VM bootup process....

• Step 2: Create a local branch on your codesandbox account.

• Step 3:
  Run yarn dev

Others

Local Setup

Requirements

1. Node.js v16.15.0 or higher for Next.js v13. (Prisma need Node.js v14.17.0 or higher)
2. For styled-jsx: Install VScode extension
3. Add relevant .env variables using .env.example template
4. Database: This project uses mysql db(see prisma schema). Follow mysql docs to install. If you want to switch database, check Prisma Provider switch docs.

# Install dependencies
yarn install

# Add environment variables (check env.example)

# Run Prisma setup (prisma migrate)
yarn p:mig dev

# Build App
yarn build

# Start development server
yarn dev

TODO

• Add E2E testing
• Upgrade to Next.js v13
• Upgrade to Prisma v4
• handle token expiry
• handle tab synchronisation
• show confirm access for sensitive info change
• add product home page
• make app more interactive
• provide functionality to pick/fork from existing lists

Tech stack

• cookie
• jsonwebtoken
• jest for testing
• material-ui
• Next.js (batteries(bundling, router, image optimizations etc) included)
• Prisma ORM
• planetscale(mysql) free iter
• recharts
• styled-jsx (for css)
• Typescript
• ts-node (run ts files)
• zustand (state management , first time user)

Credits

1. open source
2. Thanks to @thunghiemdinh for design and checkout devchallenges.