Description

TaskHola is a simple task manager mobile application built with the Django REST Framework and Expo React Native framework. It allows users to create, retrieve, update, and delete tasks. The application is built using the following technologies:

• Docker for containerization
• PostgreSQL as the database
• Django REST Framework for the backend RESTful API
• Expo with React Native for a cross-platform mobile app
• Grafana for monitoring and database management

Installation

Prerequisites

• Docker and Docker Compose
• Node.js and npm
• Expo CLI
• EAS CLI
• iOS Simulator or Android Emulator

React Native App Setup

0. Clone the repository:

   git clone https://github.com/perfettiful/TaskHola.git

   cd TaskHola/taskhola-mobile

1. Install dependencies:

   npm install

2. Install EAS CLI:

   npm install -g eas-cli

3. Configure EAS:

   eas build:configure

4. Run the app:

   npm run start:dev

5. Run tests:

   npm run test

6. Create a Production Build:

   npm run build

Django Backend Setup with Docker

0. Navigate to the backend directory:

   cd TaskHola/taskhola-backend

1. Copy the example environment file:

   cp .env.example .env

2. Fill in Desired Credentials for .ENV Variables:

      PROJECT_NAME=
   
      GRAFANA_CONTAINER_NAME=
      GRAFANA_PORT=3000
      GF_SECURITY_ADMIN_USER=
      GF_SECURITY_ADMIN_PASSWORD=
   
      POSTGRES_CONTAINER_NAME=
      POSTGRES_PORT=5432
      POSTGRES_USER=
      POSTGRES_PASSWORD=
      POSTGRES_DB=tasks_db

3. Build and run the Docker container:

   docker-compose up --build

4. Access the Django API:

   • The Django Admin panel will be available at http://localhost:8000/admin
     • Username: set in .env file
     • Password: set in .env file
   • The REST API docs will be available at http://localhost:8000/api/tasks

Accessing Grafana Locally

0. To access Grafana locally, open your web browser and navigate to: http://localhost:3000

1. The default login credentials are:

   • Username: set in .env file
   • Password: set in .env file

React Native App Production Setup

0. Login and Configure Expo Account on Expo

1. Generaate a Production Build:

• Run npm run build to create a production build

2. Ensure you have your environment variables set for production.

   • deploy-exp.yml workflow uses SSH for deployment, ensure you have the following secrests set in your Github repository:
   • EXPO_TOKEN

3. Deploy the Production Build:

   • Deploy on trigger using deploy-exp.yml workflow

4. Access the Production Build in Expo Dashboard:

   • Expo Dashboard

Backend Production Setup

0. Provision your choice of Virtual Private Server (VPS)

   • I recommend Ubuntu on AWS EC2

1. Configure Firewall and Security Groups for SSH and HTTP/HTTPS

   • See AWS EC2 Security Groups

2. Ensure you have your environment variables set for production.

   • deploy-api.yml workflow uses SSH for deployment, ensure you have the following secrests set in your Github repository:
   • SERVER_HOST
   • SERVER_USER
   • SERVER_PASS

3. Use a reverse proxy (like Caddy or Nginx) to serve your application.

   • See example Caddyfile in ./caddy

      monitor.taskhola.app {
         reverse_proxy grafana:3000
      }
   
      api.taskhola.app {
         reverse_proxy web:8000
      }

4. Build the Docker images for production on Github Actiuon Trigger: deploy-api.yml

5. Configure DNS recordss for your domain/ subdomains:

   • See the Live TaskHola API Docs: https://api.taskhola.app/api/tasks
   • See the Live Grafana Dashboard: https://monitor.taskhola.app
     • Username: taskholatest
     • Password: taskholatest

Contact & Connect

Nathan Perfetti,
Full Stack Developer

• Find me online: https://nathanperfetti.dev
• Find me on Github: @perfettiful
• Find me on LinkedIn: @nathanperfetti
• Find me on Youtube: @nathan_codes