This is a proyect created to practice React, using my own API created with Python (Django).
Check it out, it's hosted in a free server so, it will problably be slow, don't worry if it takes too much time:
Link: FullStack React Django App
You can deploy it in your on computer (check development)
-
Javascript
- React
- React Router
- Axios
- Context API
- Bootstrap
- Sass
-
Python
- Django
- Rest_framework
- corsheaders
-
SQL
- Sqlite
To have the full app in your computer working, you'll need to have these technologies :)
- Python
- Node js
- An text editor, like Visual Studio code
if you would like to want, you can learn more about those technologies by yourself...
Open another CMD or Terminal an go to the folder FullStack-ToDo-App/backend
on Windows CMD is 'cd' the command:
cd backend
Run the next commads:
(creates a environment to install required packages)(e.g. django)
python -m venv venv
**REALLY IMPORTANT**
ACTIVATE THE ENVIRONMENT TO WORK WITH PYTHON AND PACKAGES
on Windows:
venv\Scripts\activate.bat
Further information ENVIRONMENTS!!
(installs a list of packages need for development)
(venv): python -r install requirements.txt
(controls models to store data in a data base, this case sqlite)
(in case of changing the models, you should run this command, to control the version of the models.)
(venv): python manage.py makemigrations
(apply last models to the data base, update the data base schema)
(venv): python manage.py migrate
(CREATE ENVIRONMENTAL VARIABLES): COPY OR CREATE A NEW .env file like the file .env-copy at the folder backend
copy backend\.env-copy backend\.env
(SET THE VARIABLES, IN THE FILE backend.env)
# ENVIROMENT VARIABLES
URL_FRONTEND=http://localhost:3000 #this is the same where your frontend is running ...
## SMTP credentials
### a gmail account with double check credencials to be used in app ...
EMAIL_SMTP=whoami@email.com
EMAIL_PASSWORD=emailpassword
## SECURITY WARNING: keep the secret key used in production secret!
## a unique key
# you can generate a key with next code:
# in bash
> openssl rand -base64 32
# copy the text and pasete next the '=' symbol
SECRET_KEY=friedchickenisawesome.com
RUNNING THE SERVER
(run development server)
(venv): python manage.py runserver
(should appear something like this)
Watching for file changes with StatReloader Performing system checks...
System check identified no issues (0 silenced).
December 17, 2022 - 22:16:44
Django version 4.1.4, using settings 'backend.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
Open in your browser: http://127.0.0.1:8000/admin
You will need and admin account
pd
: the direction can change in some cases ...
Create an admin account
stop the server with 'ctrl + z' or 'ctrl + c' and enter ...
in the terminal with environment active, so (venv) FullStack-ToDo-App/backend: type:
You will be able to create an account to manage or develop in the admin panel
py manage.py createsuperuser
run again
py manage.py runserver
visit: http://127.0.0.1:8000/admin and enter your information.
•
•
•
Open a new CMD or Terminal an go to the folder FullStack-ToDo-App/frontend
on Windows CMD is 'cd' the command:
cd frontend
Install the dependencies in the package.json with:
this will install the required packages
npm install
Copy and set the frontend variables (on Windows)
copy .env-vars .env
Set the variables (it's the backend direction)
# API route
REACT_APP_TO_DO_API='http://127.0.0.1:8000/api'
This will put the frontend to work
npm start
This project was bootstrapped with Create React App.
You can use a EDITOR like Visual Studio code to check the code if you like ...
I really would like to know if you like what I have done in this project, so here it's my personal email : [email protected] and Twitter to get a touch.
Dear coder... me: Jonh Gomez