Woodwork Bike Park Management System

Report Bug · Request Feature

Client-side Repository

https://github.com/vpomerleau/bike-park-client

Server-side Repository

https://github.com/vpomerleau/bike-park-server

Table of Contents

• About the Project
  • Screenshots
  • Dependencies
  • Features
  • Color Reference
  • Environment Variables
• Getting Started
  • Prerequisites
  • Install a local copy
  • Server setup
  • Install the databse
  • Run Locally
• Roadmap
• License
• Contact
• Acknowledgements

About the Project

Screenshots

Woodwork Bike Park Home Page

Woodwork Bike Park Purchase Page showing Stripe Payment Element

Woodwork Bike Park Purchase Confirmation Page Page, showing purchased products and option to check-in

Features

• Authentication with Auth0
• Payments with Stripe

Tech Stack

Client

• React.js
• Material UI
• Sass
• Axios
• Auth0
• Stripe

Server

• Node.js
• Express.js
• Knex.js

Database

• MySQL

Color Reference

Color	Hex
Brand Color (light)	#D67A00
Brand Color (dark)	#EBA13F
Accent Color	#2e845d
Text Color (on dark)	#FFFFFF
Dark Background/Text Color (on white)	#000000

Environment Variables (Server)

To run this project, you will need to add the following environment variables to your .env file. See env.sample file for more details.

PORT

CLIENT_ORIGIN_URL

AUTH0_AUDIENCE

AUTH0_DOMAIN

STRIPE_SECRET_TEST_KEY

Getting Started

Prerequisites

This project uses Node as package manager

See Node intallation instructions

 npm install -g npm

You will need accounts with Auth0 and Stripe to obtain your environment variables. Make sure that values provided in the Auth0/Stripe dashboards perfectly matches the values entered in your environment variables, or the app might not load (will return errors).

Get an account with Auth0

Get an account with Stripe

Install a local copy of the project

Make a top level project directory to hold the client and server-side code

 mkdir bike-park-project
 cd bike-park-project

Clone the client and server into the top level folder (two new folders will be created)

  git clone https://github.com/vpomerleau/bike-park-client.git

  git clone https://github.com/vpomerleau/bike-park-server.git

Server setup

Go to the server directory

  cd bike-park-server

Install dependencies

  npm install

Set up the environment variables by creating a new .env file from .env.sample

Modify your .gitignore file to cover your needs - Toptal's gitignore.io is a useful tool to get a template by searching for package manager, OS, etc. For this project, recommended to at least include Node.

MySQL database setup

You will need to install mySQL if you don't have it yet.

https://dev.mysql.com/downloads/mysql/

Make sure to remember the password for your 'root' user! For example by storing it with a password manager.

In order to access MySQL from the command line, you will need to update your PATH.

For Windows

1. Right click on the Windows Start Menu and select System
2. Under "Related settings" click on Advanced system settings
3. Under the "Advanced" tab click on Environment Variables
4. Select Path and click Edit
5. Click New, and add the following. Replace X.X with your version of MySQL, for example 8.0:

C:\Program Files\MySQL\MySQL Server X.X\bin

6. Click OK
7. In your command line, you should now be able to run the command mysql --version and see the installed version of MySQL.

For Mac

1. Open terminal and enter:

  touch ~/.zshrc && open ~/.zshrc

2. Add the following line to the file:

  export PATH=$PATH:/usr/local/mysql/bin

3. Save and close the file

4. In a new terminal, you should now be able to run the command mysql --version and see the installed version of MySQL.

Create the bike-park database

1. Start your MySQL server on the command line, if it is not currently running.

  mysqld

2. Log into MySQL from the command line:

  mysql -u root -p

You will be asked for your password

3. At this point you should see the MySQL prompt:

mysql>

4. Create a database called "bikepark"

CREATE DATABASE bikepark;

Database migration and seeding with knex

Copy knexfile-example.js and rename as knexfile.js. Add your mySQL 'root' password where indicated.

Run migration

npm run migrate

Seed database with example data

npm run seed

If you need to reset the database, you can drop the tables by running:

npm run migrate:down

Run the server-side

In development mode (server restarts any time there are changes to the file) - uses nodemon

  npm run dev

To require manual restarts of server when code is update, use node instead

  npm run start

Client setup

See Client-side readme for detailed client installation instructions.

Roadmap

• Proof of concept homepage
• Auth0 integration (dev mode)
• Stripe integration (dev mode)
• User profile updates
• User controlled booking management (incl. transferring tickets to other riders)
• Unit testing
• Phases 2 to 1,000 to build a full-featured bike park management system

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Valerie Pomerleau - Twitter @PomerleauVal - LinkedIn @valeriepomerleau

Project Link

(client): https://github.com/vpomerleau/bike-park-client

(server): https://github.com/vpomerleau/bike-park-server

Acknowledgements

Thank you to BrainStation for the knowledge, wisdom and support! In particular, I'd like to thank my May 2022 Web Dev cohort's educators (Daniil Molodkov, Michael Ti, Andrew Carolan) and TAs (Brishan King and Slobodan Zaja).

Useful resources

• Bike Lorem Ipsum from Bicycle Ipsum
• Logo design with Canva
• Mountain bike animation adapted from: Pure CSS bike animation
• Database schema planning with LucidChart
• Auth0 API docs
• Stripe API docs
• Stripe Dev Support on Discord
• Shields.io
• Awesome README template