Skip to content

Real Cost - E-commerce Shopping Assistant for Vietnamese users

Notifications You must be signed in to change notification settings

leephan2k1/real-cost

Repository files navigation

Real Cost - E-commerce Shopping Assistant

Logo

The official website is realcost.shop

Table contents
Tech stack
Inspiration
Screenshots
Project Setup

Tech stack

  • NextJS x ReactJS
  • Jotai
  • Next-auth
  • TailwindCSS x HeadlessUI x Ariakit
  • MongoDb

Go to table of contents 🔼

Inspiration

  • 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

Go to table of contents 🔼

Screenshots

Home Page

home-page

Go to table of contents 🔼

Login Page:

login-page

Go to table of contents 🔼

Product Details Page

product details

Go to table of contents 🔼

Search Page

search-page

Go to table of contents 🔼

Search Page (mobile screens)

search-page-mobile

Go to table of contents 🔼

Flash-sale Page

Flash-sale page

Go to table of contents 🔼

Notifications

notifications

Go to table of contents 🔼

Browse Page

browse-page

Go to table of contents 🔼

Favorites Page

favorites page

Go to table of contents 🔼

Set Notify Conditions

ntf-conditions

Go to table of contents 🔼

Project Setup

  1. Clone this project:
git clone [email protected]:leephan2k1/real-cost.git
  1. 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
  1. 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

Go to table of contents 🔼

Happy coding!

fun-doge