This is the final project for the HackYourFuture curriculum we did as a class using the MERN stack by following the agile methodology with our team and a group of mentors. A quick guide to what we built:
Strolly is a App created to help parents or caretakers to rent a stroller in the Amsterdam, Denventer, Groningen and Den Haag area.
Click here for the Demo version
First, clone the repo and run these commands in main directory:
npm install
npm run setup
The first command will install cypress
and some small libraries needed for running the rest of the commands. The second will go into the client
and server
directories and set those up to be ran.
In the client
and server
directory there are two .env.example
files. Create a copy and rename that to .env
. Then follow the instructions in those files to fill in the right values.
after filling the right values specially the mongoDB connection string in server side you should run npm run seed:db
then your database has been seeded with initial data and ready to use.
To run the app in dev mode you can run npm run dev
Then the app gonna work in http://localhost:8080/
client
├── public
└── src
| └── components
| └── hooks
| └── pages
| └── util
| index.jsx
cypress
| └── fixtures
| └── integration
server
└── src
└── __testUtils__
└── controllers
└── db
└── ini_DB
└── models
└── routes
└── util
index.js
public
|| public facing client code__tests__
|| anyjest
tests for specific components will be in a__tests__
folder on the same level__testUtils__
|| any code that is only being used in the tests is put in the__testUtils__
folder to separate that away from the rest of the codecomponents
|| all of our shared components that are used over multiple pageshooks
|| all of our custom hookspages
|| the page components of our app, any routing will go between these componentsutil
|| any utility functions that can be used anywhere on the client sideindex.jsx
|| the start point of the client
fixtures
|| any data/files thatcypress
needs can be placed hereintegration
|| all of our tests are in here, separated in folders based on the pages in our app
__testUtils__
|| any code that is only being used in the tests is put in the__testUtils__
folder to separate that away from the rest of the codecontrollers
|| all of our controller functions that interact with the databasedb
|| all of our configuration for the databaseini_DB
|| all of our necessary initial data to be ready to seed in database and can be modified any timemodels
|| all of ourmongoose
models will be placed hereroutes
|| code to match up the API with our controllersutil
|| any utility functions that can be used anywhere on the server sideindex.js
|| the start point of the server
The base stack of the app is a MERN stack (Mongoose, Express, React, Node). Next to that we make use of the following extras:
dotenv
|| To load the .env variables into the process environment. See docswebpack
/html-webpack-plugin
|| To bundle our React app and create a static app to host. See docseslint
|| To check our code. We have different configurations for frontend and backend. You can check out the configuration in the.eslintrc.(c)js
files in the respectiveclient
andserver
folders. See docsprettier
|| To automatically format our code. See docsconcurrently
|| To run commands in parallel. See docs
For more information on how these work together including the automatic deployment to heroku, have a look at our detailed DEV file.
@testing-library/*
|| We use React Testing Library to write all of our tests. See docsjest
|| To run our tests and coverage. See docsjest-fetch-mock
|| To mock out the backend for our testing purposes. See docsprop-types
|| To type-check our components. See docs
nodemon
|| To automatically restart the server when in development mode. See docsjest
|| To run our tests and coverage. See docssupertest
|| To more easily test our endpoints. See docsmongodb-memory-server
|| To mock out our database in our backend tests. See docscors
|| To open up our API. See docsmongoose
|| To add schemas to our database. See docs