SwipeSetups

A rating and review website for computer desk setups (gaming/trading/programming).

Explanations of the technologies used

• MERN
• Vite development tool for faster and smoother workflow
• Chakra UI + Chakra Templates for styling and pre-made components and templates
• Tailwind CSS for styling
• Framer Motion for animations
• Cloudinary for animations
• BCrypt for password hashing
• JWT for creation of tokens

Tools

• SVG Icons from SVG Repo
• AI-generated images from Midjourney
• ChatGPT

Tutorials

• Landing page tutorial with Framer Motion and Tailwind CSS
• MERN Authentication Using JWT

A couple paragraphs about the general approach you took

• Started with the frontend template
• Built our backend routes to call data from MongoDB
• Connected the frontend and backend after backend API calls were working

Link to your user stories – who are your users, what do they want, and why?

• Any individual with a laptop/desktop that is looking to find inspiration and change up their work/gaming station
• Retail shops looking for the most trending work/gaming stations to style for roadshows.

Link to your wireframes – sketches of major views / interfaces in your application

Descriptions of any unsolved problems or major hurdles your team had to overcome

• Best practices for authentication
• DB schema changes
• Merge conflicts

Installation instructions for any dependencies

Install and run

Frontend:

1. In the client directory, npm i.
2. npm run dev to start react app.

Backend:

1. In the server directory, npm i.
2. rename .env.example to .env.
3. Run mongod with brew services start [email protected] and check connection with mongosh.
4. npm start to start express server.

Setup from scratch

Frontend:

1. mkdir client
2. cd client
3. npm create vite@latest ./ then choose React framework and JavaScript variant.
4. Install dependencies: npm i react-router-dom
5. Install Chakra UI: npm i @chakra-ui/react @chakra-ui/icons @emotion/react @emotion/styled framer-motion
6. Install Tailwind CSS: npm install -D tailwindcss postcss autoprefixer then npx tailwindcss init -p. Then, add the Tailwind directives to root CSS file:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

Backend:

1. In root, type mkdir server
2. cd server
3. npm init -y
4. In the package.json file:

• Add to scripts: "start": "nodemon index".
• Add below description: "type": "module", so that we can use ES6 import/exports instead of require statements.

5. Install dependencies: npm i cors dotenv express mongoose nodemon method-override
6. Install cloudinary to handle image urls npm i cloudinary body-parser