FASHION 4 YOU - SHKD

A full stack web application project built with React, Express.js, and Sequelize.js

Deployed site: https://shkd.fly.dev/

Features and Walkthrough

Users can:

• Create a profile
• Browse listings generated by users
• Create listings for sale
• Edit and delete listing
• Add listings to cart and checkout
• View transaction history
• Toggle between light and dark mode

Walkthrough

Please click to expand embedded walkthroughs

Landing Page and Login

FASHION.4.YOU.-.Landing.Page.and.Login.mov

Browse for listings and search for them via the searchbar

Browse.and.Search.mov

Create, edit, and delete a listing

Create.Edit.and.Delete.Listing.mov

Add listings to cart, checkout, and view transaction history

Add.to.Cart.Checkout.and.Order.History.mov

Stack

Node.js v16 LTS is recommended

Backend API

• express.js (v4.18.2)
• sequelize.js (v6.25.2)
• PostgreSQL (v14 recommended)

Frontend React client

• Based on create-react-app
• Chakra UI
• React Router (v6)

Development Setup

To run the backend API on your local machine, make sure to read the following:

Ensure you have PostgreSQL installed

• Check if you have PostgreSQL installed
  • ✅ versions 10-14 should work
  • 🚫 version 15 has not been tested
• If you need to install PostgreSQL see the installing PostgreSQL guides

Create a PostgreSQL user and database

The project-starter template which this repository was forked from expects the following for local development:

• PostgreSQL User/Role
  • name: ctp_user
  • password: ctp_pass
• PostgreSQL Database
  • name: ctp_appdb_development

For Windows/pgAdmin users

If you are on Windows and installed pgAdmin follow our pgAdmin guide to create a user in PostgreSQL named ctp_user with the password ctp_pass and a database named ctp_appdb_development.

For Mac/Linux users

Create a user in PostgreSQL named ctp_user with the password ctp_pass:

This only needs to be done one time on your machine You can create additional users if you want to.

createuser -P -s -e ctp_user

Create a separate db for this project:

createdb -h localhost -U ctp_user ctp_appdb_development

You will create a DB for each project you start based on this repo. For other projects change ctp_appdb_development to the new apps database name.

Running the app locally

For local development you will need two terminals open, one for the api-backend and another for the react-client.

Clone this app, then:

# api-backend terminal 1
cp .env.example .env
npm install
npm run dev

# react-client terminal 2
cd client
npm install
npm start

• api-backend will launch at: http://localhost:8080
• react-client will launch at: http://localhost:3000

In production you will only deploy a single app. The react client will build into static files that will be served from the backend.

Deployment

Hosting on Railway.app (recommended)

1. Create a Starter account using your Github username
   • You get $5 in credit a month for free and do not have to provide a credit card
2. Verify your account by answering Railways questions
3. Create a "New Project"
4. Select "Deploy from Github repo"
   • follow instruction to link your project repo to railway
5. Click "Deploy now"
   • your app will fail, but we will fix it in the next steps
6. Add a PostgreSQL Database to your Railway project
   • click the "+ New" button at the top right of the project
   • click "Database >"
   • click "Add PostgreSQL"
   • to add a PostgreSQL Database to your project
7. Add environment variables if you need any
   • Do not add the PORT variable (Railway will set this for you)

Your app will now be live and auto deployed on new commits. If it's not working you may need to restart the app manually in the Railway UI.

Hosting on Heroku (no longer free)

NOTE: Heroku is no longer free, but these instructions still work. We recommend getting started with railway.app

1. Create a Heroku account (if you don't have one)
2. Install the heroku cli (if you don't already have it)

• Requires that you have git installed

# login with the cli tool
heroku login

Create a Heroku project

Next, cd into this project directory and create a project:

# replace `cool-appname` with your preferred app name
heroku create cool-appname

# add a free PostgreSQL database to your heroku project
heroku addons:create heroku-postgresql:hobby-dev

This will make your app accessible at https://cool-appname.herokuapp.com (if the name is available).

You only need to do this once per app

Add Environment Variables

Any environment variables your app needs will be available through your heroku project's settings page.

NOTE: Heroku calls them Config Vars

• Go to the dashboard page here: https://dashboard.heroku.com/apps
• Click on the Settings tab
• Click Reveal Config Vars
• Add any environment variables you have in your .env file

Deploying the app

Whenever you want to update the deployed app run this command.

git push heroku main

This command deploys your main branch. You can change that and deploy a different branch such as: git push heroku development

Project Structure

.
├── README.md
├── api
│   ├── app.js
│   ├── config
│   │   └── config.json
│   ├── controllers
│   │   ├── index.js
│   │   └── microPosts.js
│   └── models
│       ├── MicroPost.js
│       └── index.js
├── client
│   ├── README.md
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   └── src
│       ├── App.css
│       ├── App.js
│       ├── components
│       │   ├── AddModal.js
│       │   ├── CartDrawer.js
│       │   ├── CartTable.js
│       │   ├── DeleteListingButton.js
│       │   ├── EditModal.js
│       │   ├── Footer.js
│       │   ├── Headline.js
│       │   ├── LoadingSpinner.js
│       │   ├── Navigation.js
│       │   ├── ProductCard.js
│       │   └── ProfileMenu.js
│       ├── index.js
│       └── pages
│           ├── LandingPage.js
│           ├── ListingsPage.js
│           ├── LoginPage.js
│           ├── MyListingsPage.js
│           ├── OrderHistoryPage.js
│           └── RegisterPage.js
├── package-lock.json
└── package.json