Live Site | Project Wiki | Report Bug
MagicBook is a social media site for students of Hogwarts. This website was designed as a Week 21 project as part of App Academy's 24-week Full Stack Software Engineering Bootcamp.
Javascript | Node.js | Flask | React | Redux | SQLAlchemy | PostgreSQL
- Clone the project repository
git clone https://github.com/DanielLaV/MagicBook.git
- Install dependencies
pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt
- Create a local .env file modeled after the .env.example file in the root directory
FLASK_APP=app
FLASK_ENV=development
SECRET_KEY=<<YOUR-SECRET_KEY>>
DATABASE_URL=postgresql://magicbook_app:<<PASSWORD>>@localhost/magicbook_db
-
Set up your PostgreSQL user, password, and database. Make sure that it matches your .env file!
-
Access your
pipenv shell, migrate your database, seed your database, and run your flask app with the following commands:
pipenv shell
flask db upgrade
flask seed all
flask run
- To run the React App,
cdinto thereact-appdirectory, installreact-app, and then start React:
cd react-app
npm install
npm start
Full user stories for the initial development phase are available on the User Stories section of the project wiki. A feature list for the initial development phase is available on the Feature List section of the project wiki.
New users can register for an account by entering a unique username and email, their name, school house, year and a secure password.
Existing users can log in to their account by submitting their credentials via the login form.
Logged in users can edit their profile.
Users may log out of their account by clicking the LOGOUT button on the site-wide navigation sidebar.
A user may add new posts to their profile.
Users can edit or remove their posts from their profile.
Users can comment on posts. They can read other comments and edit and delete their own comments.
The full database schema is available to view on dbdiagram.io, or as a list of tables on the Database Schema page of the wiki.
All frontend routes are covered in detail on the Fronted Routes section of our project wiki. Frontend routes were designed to enable users access to basic functionality such as registration, authentication, viewing posts, accessing comments, and viewing their profile page where users can manage their info.
All frontend routes are covered in detail on the API Routes section of our project wiki. API routes were designed for users to interact with a page without being redirected.
The website is currently functional on all screen sizes, but is styled for screens greater than 900 px in width. New smaller-scale layouts will be implemented so that the user experience on mobile or tablet devices is comparable to the desktop user experience.