The official website is realcost.shop
| Table contents |
|---|
| Tech stack |
| Inspiration |
| Screenshots |
| Project Setup |
- NextJS x ReactJS
- Jotai
- Next-auth
- TailwindCSS x HeadlessUI x Ariakit
- MongoDb
- The website layout is inspired by my previous comic project Kyotomanga.live
- Processes and user experience inspired by BeeCost and Lichsugia
- The UI Components is strongly inspired by Sulton Handaya member of Pelorous Studio team on Dribble
- Clone this project:
git clone [email protected]:leephan2k1/real-cost.git
- Install all dependencies
yarn i
But I highly recommend using this package of utilities to avoid mistaking node modules package manager: antfu/ni
If you already have it installed, just type the following extremely short command:
ni
- Environment variables setting
# see: https://github.com/leephan2k1/e-commerce-tracking-server
NEXT_PUBLIC_BASE_URL=<your-backend-endpoint>
# This key serves webPush notify, it must match the key on the server.
# On the server type: npx web-push generate-vapid-keys then store 2 keys to .env and export a public vapid key to client.
NEXT_PUBLIC_VAPID_KEY=<your-public-vapid-key>
# Note: Because i use next-auth You must provide callback uri for facebook and google has the following form: your-domain.com/api/auth/callback/<provider> .Otherwise the authentication won't work!
# Google Oauth2 (See: https://console.cloud.google.com/)
GOOGLE_ID=<your-google-auth-id>
GOOGLE_SECRET=<your-google-auth-secret>
# Facebook Oauth (See: https://developers.facebook.com/apps)
FACEBOOK_CLIENT_ID=<your-facebook-client-id>
FACEBOOK_CLIENT_SECRET=<your-facebook-secret>
# Mongodb: (See: https://www.mongodb.com/atlas/database)
MONGODB_URI=<your-mongodb-uri-endpoint>
# Random Secret (Easy generate: https://generate-secret.vercel.app/32)
JWT_SECRET=<your-jwt-secret>
BC_URL=https://beecost.vn
BC_BASE_API=https://apiv3.beecost.vn
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent