owaisad / ecoflipr

EcoFlipr - A robust full-stack reselling platform that simplifies the process of selling products with ease and efficiency.

EcoFlipr

Table of content

• EcoFlipr
  • Table of content
  • About
  • Technologies
  • Setup project instructions

About

Full Stack application using TypeScript, React.js, GraphQL, Mongoose, MongoDB, Express, Node.js.

Technologies

Technologies used:

• Backend:
  • GraphQL (Apollo GraphQL) as middleware with Express for API, MongoDB as document DB using Mongoose for Object Document Mapping, written in TypeScript.
  • JWT token auth, with bcrypt checked on specific requests.
  • Integration testing done with JEST
• Frontend:
  • User interface made with React (built using Vite) and styled with Tailwind CSS (also used for DARK-mode).
  • Implements react-routing with protected routes.
  • React-hot-toast for notifications.
  • Downscale images for fast load: here
• Both:
  • Using Prettier for formatting and Husky for auto formatting using pre-commit hook

Check out documentation

Setup project instructions

Start by running the backend:

1. Right click server folder
2. Click: Open in integrated terminal In the terminal write:
3. Install dependencies: npm i
4. Create a ".env" file in the folder and add the following key and values (or use the .env.template):

MONGO_PRODUCTION_URI=YOUR_MONGO_PRODUCTION_DB_URL
MONGO_DEVELOPMENT_URI=YOUR_MONGO_DEVELOPMENT_DB_URL
MONGO_TEST_URI=YOUR_MONGO_TEST_DB_URL
JWT_SECRET=ThisCouldBeYourJWT_SECRET
JWT_EXPIRES_IN=1h
PORT=5000

5. ONLY WHEN RUNNING FIRST TIME: In app.ts, uncomment line 63 and 64 to seed/populate the db with categories and cities. Remember to shutdown the server and comment out the lines after first execution.
6. Now fire up the server: npm run dev

Your backend should now be running on http://localhost:5000 and that should be it.

Now for the fronend:

1. Right click client folder
2. Click: Open in integrated terminal In the terminal write:
3. Install dependencies: npm i
4. Create a ".env" file in the folder and add the following key and values:

You would have to create 2 api keys:

• Google Maps Api
• Upload JS Api

VITE_GOOGLE_MAPS_API=GOOGLE_MAPS_API
VITE_IMAGE_UPLOADER_API=UPLOADER_JS_API

5. Finally run: npm run dev

That should be it for the frontend. Enjoy.