A Book Sharing Community web app that let's you be your own library.
Chingu Voyage-25 (bears-team-06) (https://chingu.io/)
OpenShelf is a responsive web app for people who want to share books with one another. Members can check out books from their community or manage their own library.
Features include: uploading owned books (with help from the Google Books API), inventory management, and waitlists for unavailable books.
https://openshelf.netlify.app/
- Account Login and Signup via email+password authentication
- Search for books in the OpenShelf Library
Once logged in, users will be able to:
- Upload book titles using the Google Books API
- Manage their inventory by marking books as returned or removing books they no longer want to share
- Check out books that other members have uploaded
- Join a waitlist if a book is already checked out
- Leave a waitlist
The primary libraries and dependencies used in the development of OpenShelf are shown below. For a complete list of dependencies, consult the package.json files inside the client and server folders.
| Library | Purpose | Client or Server? |
|---|---|---|
| React | A JavaScript library for building UIs | Client |
| Material-UI | React UI Component Library | Client |
| Airbnb | React/JavaScript Development Style Guide | Client |
| MongoDB with Mongoose | Schema-Based MongoDB Application Data Modeling | Server |
| Express | Backend Server Framework | Server |
| GraphQL | API Query Language | Server |
| DataLoader | A generic utility for batching and caching data. | Server |
We developed the project using a source-control branching model called Trunk Based Development which is used at tech companies like Google and Facebook. The model involves developers collaborating on a single branch known as the trunk, or more commonly known as the Master or Main branch on Github.
In addition, we would create short-lived Git branches, unique to each developer, where we would push small commits and conduct code reviews using pull requests.
(1) Commands (/) |
Purpose |
|---|---|
npm run client |
Run Frontend Dev. Server locally |
npm run server |
Run Backend locally using nodemon |
npm run dev |
Run Frontend and Backend (with nodemon) locally using Concurrently |
(2) Commands (/client) |
Purpose |
|---|---|
npm start |
Run Frontend Dev. Server locally |
npm run build |
Build Frontend for Production |
npm run test |
Run Frontend Tests |
(3) Commands (/server) |
Purpose |
|---|---|
npm start |
Run Backend Server Locally |
| Location | Purpose |
|---|---|
/client |
Frontend Directory |
../public |
Static Assets |
../src |
Source Directory |
../../components |
React Components |
../../screens |
Pages Directory |
../../dataservice |
Data Fetching |
../../../queries |
GraphQL Query and Variable Objects |
../../../mutations |
GraphQL Mutation and Variable Objects |
/server |
Backend Source Directory |
../graphql |
GraphQL Type Definitions |
../../schema |
GraphQL Schema |
../../resolvers |
GraphQL Resolvers |
../models |
MongoDB/Mongoose Data Schemas |
Before starting the server in your local development environment, the following environment variables should be defined:
| Variable Name | Description |
|---|---|
| AUTH_SECRET | A random string of characters used for encrypting JSON Web Tokens |
| MONGODB_USER | Database username, used in MongoDB Atlas connection string. |
| MONGODB_PASSWORD | Database password, used in MongoDB Atlas connection string |
| MONGODB_NAME | Database name, used in MongoDB Atlas connection string |
This is accomplished by including the following in the .env file located in the root of the /server directory. This .env file must never be pushed to GitHub since it contains application sensitive information such as the database username and password.
The /server/.env file must contain the following:
AUTH_SECRET = <random-secret-key>
MONGODB_USER = <db_user>
MONGODB_PASSWORD = <db_password>
MONGODB_NAME = <db_name>
Note: When running client and server concurrently from the root directory, you will need to have these .env variables inside the root folder as well.
Instructions on how to create a MongoDB Atlas account and how to obtain the MONGO_CONNECTION_STRING mentioned above can be found at the link below.
MongoDB and Mongoose (with pictures!)
You will need a Google account and register your application with the Google API Console.
https://developers.google.com/books/docs/v1/getting_started
After registering your API key, store it in the .env file located in the /client directory. Again, never push this .env file to Github as it contains your secret Google Books API key.
The /client/.env file must contain the following:
REACT_APP_API_KEY = yourOwnAPIKeyHere
Note: When deploying to Netlify, make sure to add this environment variable when adding the project to Netlify. See the Netlify Deployment Guide for more information on how to do this.
Netlify Deploy Guide (with pictures!)
Due to having both the server and client in a single Github Repo, the server must be deployed using a git command to push a subtree from the root of the repository directory.
As a quick disclaimer, we are deploying the server as it is structured in the repo
Before deploying to Heroku, make sure you have created an account with a new project on https://heroku.com
- After downloading the repository, from the command-line, go to
/serverdirectory and install dependencies.
cd <repo-root-directory>/server
npm install
- Download the Heroku command-line interface.
MacOS
brew tap heroku/brew && brew install heroku
Ubuntu 16+
sudo snap install --classic heroku
For Windows, find the download for 64-bit or 32-bit here.
- Login with Heroku from the command-line
heroku login
- Verify heroku has been added to git's remote.
git remote -v
If you see "heroku" in the list, you can skip step 5.
- Add Heroku as a remote repository
git remote add heroku https://git.heroku.com/<your-heroku-project-name-here>.git.
- Add Config Variables (environment variables) to Heroku. Read more about these needed variables here. Fill out the variables according to your variables set in
/server/.env
heroku config:set AUTH_SECRET="<your-auth-secret>" --app your-app-name
heroku config:set MONGODB_USER="<db_user>" --app your-app-name
heroku config:set MONGODB_PASSWORD="<db_password>" --app your-app-name
heroku config:set MONGODB_NAME="<db_name>" --app your-app-name
-
The Heroku command-line uses git commits to figure out what to push to Heroku.
Since we are using a mono repo (client and server are in one github repo), then we will create a subtree with git and specify the subdirectory.
Before we do that, we have to be in the root directory. If you've been following along, at this point you should be inside
/serverand need to go up one level.
cd ../
- Then let's make a subtree push to Heroku with the server directory which follows this structure.
git subtree push --prefix [subdirectory] [remote] [branch]
--
git subtree push --prefix server heroku master
Although this method works, if there is ever a time where the commits made to your remote repository do not match the commits made in Heroku, there will be a conflict and the above command will not let you commit. If a problem ever comes up, the below command is the alternative method of pushing to Heroku.
git push heroku $(git subtree split --prefix=server $(git symbolic-ref --short -q HEAD)):master --force
That's it! The server is now deployed on Heroku.
User Data:
- User locations to serve a wider geographical area
- Contact / messaging feature
Book Search:
- Add book search filters i.e. by location radius, availability, etc.
- TBD
- Babak Chehraz [Portfolio]
- Andrew Knox
- Michelle Bence