Skip to content

nidheesh-p/React-Python-Demo

Repository files navigation

Use Cases
	Actor(s): Authenticated Admin users
	Use Cases
		List Team members
		Add a new team member
		Edit existing member
		Delete a member
Client
	Tech stack
		React
		Axios(For RESTful service calls from react based client side)
		Styled-components for dynamic css additions in the react components and for easy extensibility
Server
	Tech stack
		Python 3.12
		Django 5.1
		Django rest framework 

Database
	SQLite: SQLite is chosen as the persistent data storage considering that the requirement is simple. We need a light weight storage to retrieve and return the data to the client applications.

High Level design
	This application is built as a 3 tier architecture. 

1. Web client (Presentation layer)
	This web client is built using react javascript framework. Considering the simplicity of the requirement, the application is using the state management supported out of the box in react, This avoids the complexity of using state management frameworks like redux, mobx etc. As the system continues to extend in the future, a more sophisticated state management framework can be used.  
	This is a SPA and page navigation is done with Routing mechanism supported through react-router-dom package. 
	CSS and related UI styling is done with the support of styled-components library. This gives the flexibility in building reusable UI libraries and keep the code readable. This will considerably improve the maintainability of the UI and styling related code long term.
	Axios package is used for API call to pull th data from Django REST framework

2. API/Services (Business Logic Layer)
	This is the service layer where core business functionalities are implemented. This is extensible in such a way that any future enhancements to the functionalities can be easily incorporated. 
This service is REST based and can be easily scale based on the future traffic needs. This can be achieved by horizontally scaling the services. We can improve the availability and reduce the latency by hosting the service in multiple availability zones across regions depending on the geographic distribution of the admin users using this app. 

3. Database (Data layer)
This is the persistent storage powered by sqlite3. This is integrated from Django directly which makes the deployment easy. Django provides libraries out of the box to directly communicate with SQLite. All CRUD operations are done through library calls from Django. Modal, ModelViewSet and Serilizers in Django encapsulate the data retrieval and manipulation operations. We can add proper monitoring calls to keep track of the server data usage and make necessary adjustments in the future.

Below is the data structure of the Emp model which is saved in the database. 

   first_name = models.CharField(max_length=200, blank=False)
   last_name = models.CharField(max_length=200, blank=False)
   email = models.EmailField(blank=False)
   phone_number = models.CharField(max_length=20, blank=False)
   role = models.BooleanField(default=EmpRole.REGULAR)

Note: The testing, deployment and monitoring approaches below are proposals and it is not implemented in the currently submitted code.

Environment setup

	Server
		Prerequisites
			- Python v3.12 in the virtual environment
			- Mac computer

		Steps
			1. Goto project folder
				- cd EmpMgr (newly cloned directory)
			2. Create a virtual environment to isolate the package dependencies locally
				- python3 -m venv EmpMgrEnv
				- source EmpMgrEnv/bin/activate  (on Mac machine)
				- EmpMgrEnv\Scripts\activate (on Windows)
			3. Install the project's dependencies using pip-
				- pip install -r requirements.txt
			4. Setup the DB and Apply migrations to set up the database schema
				- python3 manage.py createdb
				- python manage.py migrate
			5. Create superuser
				- python manage.py createsuperuser --username admin --email <<your email>>
			6. Start the Django development server
				- python manage.py runserver
			7. Test and verify the server
				- Open the browser and goto http://127.0.0.1:8000/


	Client
		Prerequisites
			- Node.js
				- Recommended: Node.js 16 or later.
				- Minimum: Node.js 14.
			- npm
				- Recommended: The latest stable version of npm.
				- Minimum: npm 6 or later.

		Steps
			- Cd EmpMgr/empmgrfrontend   (Client code is saved in empmgrfrontend folder)
			- npm install
			- Npm start (this will open the project in browser url http://localhost:3000)


Testing
	All the use cases are converted in detailed test cases. Manual testing is performed on all the test cases. 

	There are four types of automation testing which can be performed.
		- E2E testing for all four core functional requirements.
		- Unit testing across client and server code. We can use python “unittest” library for server side unit testing. For Java script unit testing, I would recommend to use Jest which is a reliable and stable library for unit testing. I would prioritize to add unit testing for all the reusable components before adding unit tesing for the remaining components. This will help get the right balance between core business functionalities and the stability of the application. If there are resource constraints, and we already reached ~70% of code coverage, we could slow down additional code coverage tasks to implement subsequent business requirements.
		- API and Integration testing: This is required to test all the success and failure cases by hitting the API.
		- UI testing.: This automation testing is required to test all UI navigations across three pages. Automation pipeline will fail if any UI flow is failing which will prevent the code to be built for deployment. I would recommend using cypress for web based UI automation testing.

Deployment
	Deploying the system is straightforward. There are mainly two parts we need to take care
	Web deployment
		Package.json file contains all the dependencies related to the web client. 
		For development deployment, run npm run dev(or npm start)
  			Run the following command to build the code for production deployment
			npm run build
	Server deployment 
		Identify the production environment(Eg. AWS, GCS, Azure etc.)
		Install the dependencies(eg. Python 3.12, Django 5.1 etc.)
		Enable version control and automate the deployment process with Github or Gitlab of Jenkins
		Build and deploy Django package in Docker or related containers.
		Add and connect to SQLite

	Monitoring and Alerting
 		I would recommend to integrate with sentry for tracking all server side errors in a centerlized system. This will help debug if there are issues. Depending on the criticality of the system, we can also integrate with prometheus and get real-time update of the application in grafana like dashboard. Also, to notify the oncall incase of failure, we could integrate with pagerduty by configuring the alert thresholds in prometheus alerting system. This will help us send notificatons to Slack, email of phone call in case there are system failures in production server.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published