Fullstack Portfolio
Personal Fullstack Portfolio Using React, Tailwind, Django Rest Framework, Docker & Kubernetes
Source Code:
https://github.com/Poojan670/fullstack-portfolio
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.
Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.
Django REST framework (DRF) is a powerful and flexible toolkit for building Web APIs. Its main benefit is that it makes serialization much easier. Django REST framework is based on Django's class-based views, so it's an excellent option if you're familiar with Django.
Project Description
FullStack Porfolio Web Application Using React as Frontend, DRF as backend on express server, PostgreSQL as database
Fully Dockerized and Configured Kuberentes
Requirements
React 17+
npx/npm/node
postgresql 9.0+
django 4.0+
Installation
CLIENT SETUP
Setup an .env.development file in frontend/ with following sample
REACT_APP_BASE_URL=
REACT_APP_EMAIL_JS_SERVICE=
REACT_APP_EMAIL_JS_TEMPLATE=
REACT_APP_EMAIL_JS_KEY=
Install Using yarn package
$ yarn
Run the Project
$ yarn start:development
SERVER SETUP
Setup an .env file in backend/ with following sample
// For DRF & Postgres Configurations
SECRET_KEY=
DEBUG=
ALLOWED_HOSTS=
DB_NAME=
DB_USER=
DB_PASSWORD=
DB_HOST=
DB_PORT=
CORS_ALLOWED_ORIGINS=
CORS_ALLOW_ALL_ORIGINS=
Create a virtual environment
python -m venv env
Activate the virtual environment
env/Scripts/activate
Install Using pip package
$ pip install -r requirements.txt
Setup Database
Open PSQL Terminal
$ create database DB_NAME
$ create role DB_USER with password DB_PASSWORD
$ allow all privileges on database DB_NAME to DB_USER
Perform the DB migrations in django
$ py manage.py migrate
$ py manage.py runserver 8000
Follow the swagger Ui Documentation
http://{SERVER_HOST}:{SERVER_PORT}/doc
Try it out with Docker
Dockerize Personally (OPTIONAL)
$ docker build -t frontend .
$ docker build -t backend ./django/
$ docker run -p 3000:80 frontend
$ docker run -p 8000:80 backend
Run the Project via Docker Compose Directly
$ docker-compose up
Try it out with Kubernetes
Setting up the project in miniube-kubernetes cluster
$ minikube start
$ minikube status
$ alias k='kubectl
$ docker-compose -f k8s/minikube.yml build backend
$ k apply -f kubernetes/django/deployment.yml
_for postgres user and password_
$ echo -n "my-secret-user" | base64
bXktc2VjcmV0LXN0cmluZw==
$ echo -n "my-secret-password" | base64 -d
my-secret-string
$ k apply -f k8s/postgres/secrets.yml
$ k apply -f k8s/django/deployment-v1.yml
$ k apply -f k8s/django/migration.yml
_Run the services and deployment if not applied for django_
$ k apply -f k8s/django/
$ docker-compose -f k8s/minikube.yml build frontend
$ k apply -f k8s/react/
$ minikube addons enable ingress
$ k apply -f k8s/ingress.yml
Navigate to http://localhost:3000 & http://localhost:8000
and see the desired application running on kubernetes-cluster
