Web application that features a welcome page and offers the possibility to register and log in. It also includes a search engine to find Marvel characters, a favorites view to show the items saved by the user, and a profile view where the user can change their data. Each character is presented in a card, with options to add or remove from favorites and view the details of each character.
Regarding the backend, the application has CRUD functionalities for users and their favorites, storing the data in a database. Allowing the user to access and modify their favorites at any time, as well as the possibility to modify their initial login information or delete their account.
This boilerplate comes with a centralized general Context API. The file ./src/js/store/flux.js has a base structure for the store, we encourage you to change it and adapt it to your needs.
React Context docs BreathCode Lesson view
The Provider is already set. You can consume from any component using the useContext hook to get the store and actions from the Context. Check /views/demo.js to see a demo.
import { Context } from "../store/appContext";
const MyComponentSuper = () => {
//here you use useContext to get store and actions
const { store, actions } = useContext(Context);
return <div>{/* you can use your actions or store inside the html */}</div>;
};It is recomended to install the backend first, make sure you have Python 3.8, Pipenv and a database engine (Posgress recomended)
- Install the python packages:
$ pipenv install - Create a .env file based on the .env.example:
$ cp .env.example .env - Install your database engine and create your database, depending on your database you have to create a DATABASE_URL variable with one of the possible values, make sure you replace the valudes with your database information:
| Engine | DATABASE_URL |
|---|---|
| SQLite | sqlite:////test.db |
| MySQL | mysql://username:password@localhost:port/example |
| Postgress | postgres://username:password@localhost:5432/example |
- Migrate the migrations:
$ pipenv run migrate(skip if you have not made changes to the models on the./src/api/models.py) - Run the migrations:
$ pipenv run upgrade - Run the application:
$ pipenv run start
To insert test users in the database execute the following command:
$ flask insert-test-users 5And you will see the following message:
Creating test users
[email protected] created.
[email protected] created.
[email protected] created.
[email protected] created.
[email protected] created.
Users created successfully!
To update with all yours tables you can edit the file app.py and go to the line 80 to insert the code to populate others tables
- Make sure you are using node version 14+ and that you have already successfully installed and runned the backend.
- Install the packages:
$ npm install - Start coding! start the webpack dev server
$ npm run start
This boilerplate it's 100% read to deploy with Render.com and Heroku in a matter of minutes. Please read the official documentation about it.