Skip to content

Latest commit

 

History

History
86 lines (58 loc) · 3.47 KB

README.md

File metadata and controls

86 lines (58 loc) · 3.47 KB
Raw

Gym Log

Full Stack Django & React Web App with JWT authentication.

This repo can be used as a starting point for developing a production-ready application using Django, React, and Postgres in a Dockerized environment with deployment to Heroku.

Live web app

To access the React application, go to gym-log.herokuapp.com.

To access the Django Swagger API endpoints, go to gym-log.herokuapp.com/swagger/.

NOTE: The web application may take a few seconds to start up.

Live web app screenshot

Motivation for creating the app

I liked the mobile version of the strong app that allows logging workouts, viewing them, and getting a list of available exercises. So I implemented the basic functionality of the strong app in a CRUD Web Application with Django & React.

Local deployment

  1. Install docker: https://docs.docker.com/get-docker/
  2. Clone github repo.
  3. Run: docker-compose up --build.

To access the fronted part of application open http://localhost:3000 in your browser.

To view Swagger API endpoints open http://localhost:8000/swagger/ in your browser.

To view Django admin site open http://localhost:8000/admin/ in your browser.

Production deployment

  1. Create Heroku Account
  2. Download/Install/Setup Heroku CLI
  3. After installation, log into Heroku CLI: heroku login.
  4. Run: heroku create <your app name> to create the Heroku application.
  5. Run: heroku stack:set container so Heroku knows this is a containerized application.
  6. Run: heroku addons:create heroku-postgresql:hobby-dev which creates the postgres add-on for Heroku.
  7. Set a SECRET_KEY in Heroku config vars settings.
  8. Set the URL of your application, e.g. https://<app name>.herokuapp.com, into environment variable HOST_NAME in Heroku config vars settings.
  9. Deploy your app by running: git push heroku master.
  10. Go to <your app name>.herokuapp.com to see the published web application.

Dockerfile.prod

Heroku uses multi-stage Docker build Dockerfile.prod file to build and run the application.

If you want to build and run the production Dockerfile locally, use these commands:

docker build --build-arg=PORT=<port num> -t gym-log:latest .  
docker run -it -p <port num>:<port num> gym-log:latest

Main tools and libraries

Backend:

  • Django as a web framework.
  • Django REST framework for building web APIs, serialization, and deserialization.
  • JWT authentication for securely transmitting information between frontend and backend applications.
  • PostgreSQL as a database in production.

Frontend:

  • React for building user interface.
  • React Bootstrap for simplifying the creation and styling of React components.
  • React Query for managing server state, getting data from the backend, and updating it.
  • Redux for managing application state. And Redux Persist to store state between page reloads.
  • Formik and Yup for object schema validation for login and register pages.

Ideas for improvement

  • Add logic for email confirmation on registration.
  • Add logic for password reset on the login page.
  • Add internationalization for several languages.