Encephascape is a single page web application "BrainScape" clone where users can create, bookmark, and study stacks.
- Live Site
- Usage
- Technologies Used
- MVP Feature List
- API Routes
- Frontend Routes
- Database Schema
- Tests
- Contact
cd backendand create a .env based off .env.example. Fill in the newly created .env file with your PSQL user and database credentials.
-
Install dependencies in both backend and front-end directories
cd backend && npm installcd frontend && npm install
-
In the /backend folder run the following command to create, migrate, and seed the database.
npx dotenv sequelize db:create && npx dotenv sequelize db:migrate && npx dotenv sequelize db:seed:all
-
Run the following two commands from the root folder each on seperate terminal windows:
cd backend && npm startcd frontend && npm start
- Navigate to
http://localhost:3000/to interact with the EncephaScape app!
- Sequelize ORM
- PostgreSQL
- Express
- bcrypt
- React
- Redux
- Material UI
- Lodash
- Users can sign up, log in, and log out.
- Users can login as demo-user to interact with the application.
- Authenticated users can navigate to their Brainfolio which displays their bookmarked stacks and created stacks.
- Authenticated users can navigate to Profile which allows them to update their username, email, and password.
- Users can play stacks to study their associated questions.
- Authenticated users can create stacks with an associated category and questions.
- Authenticated users can bookmark, edit, and delete their own stacks.
- Authenticated users can bookmark other users stacks as well as their own.
- Authenticated users can remove their bookmark from other users stacks as well as their own.
- Users can search stacks by name and/or category on the Stacks page.
POST /api/session
GET /api/session
DELETE /api/session
POST /api/users
DELETE /api/users
GET /api/categories
GET /api/stacks
POST /api/stacks
GET /api/stacks/:stackId
DELETE /api/stacks/:stackId
GET /api/stacks/features/random
GET /api/stacks/features/search
GET /api/bookmarks
POST /api/bookmarks
DELETE /api/bookmarks/:bookmarkId
POST /api/cards
DELETE /api/cards/:cardId
PUT /api/cards/:cardId
This page displays a navigation bar with login/sign up modals or a user button with the option to logout. Users are able to see a list of available categories and authenticated users will be able to see and additional list containing their bookmarked stacks.
This page displays a search bar to search for stacks along with the option to filter by category.
This page displays a stacks name, user, and associated questions. Answers are blurred out until a user hovers over the blurred answer.
This page displays a form with a name field, category field, and question fields. Users can add additional questions before creating a stack.
This page displays a users stacks and bookmarked stacks. At the top of the page is the "BrainfolioActions" component that takes a user to either a random stack or to create a stack.
This page displays a users account information and allows for the update of a users account information and/or password.
| column name | data type | details |
|---|---|---|
| id | integer | not null, primary key |
| username | string | not null, unique |
| string | not null, unique | |
| hashedPassword | binary string | not null |
| createdAt | datetime | not null |
| updatedAt | datetime | not null |
| column name | data type | details |
|---|---|---|
| id | integer | not null, primary key |
| name | string | not null |
| column name | data type | details |
|---|---|---|
| id | integer | not null, primary key |
| name | string | not null |
| categoryId | integer | not null, foreign key |
| userId | integer | not null, foreign key |
| createdAt | datetime | not null |
| updatedAt | datetime | not null |
| column name | data type | details |
|---|---|---|
| id | integer | not null, primary key |
| stackId | integer | not null, foreign key |
| term | string | not null |
| response | string | not null |
| createdAt | datetime | not null |
| updatedAt | datetime | not null |
| column name | data type | details |
|---|---|---|
| id | integer | not null, primary key |
| userId | integer | not null, foreign key |
| stackId | integer | not null, foreign key |
| createdAt | datetime | not null |
| updatedAt | datetime | not null |
name: Mustafa Mousa
email: [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent