Project Idea - A website acting as transaction between oxygen sellers and buyers

In the present Covid19  situation it has become the need of the hour to find Oxygen sellers in an area. Many people lose their lives due to not finding the oxygen seller in their area. We have come up with a solution for that. What if there was a website where all you needed to do was enter your city name and it showed all the places where you could buy oxygen near you. It will be awesome right!. That's what we have done.

Tools Used:

• Frontend -  React
• Backend  -  Django REST

React: React is a javascript framework to make UI components and build User Interfaces. To learn more about it, check out its docs here: https://react.dev/

Django REST: Django is a Python-based web framework that follows the model–template–views architectural pattern. Django REST framework is a toolkit for building Web APIs.

Step by step implementation of the project: To get this project running on your own local system make sure you have node.js and Django installed.

1. Clone the Repository from Github: The Github link is "https://github.com/LordofUniverse/oxy-zone-frontend". Clone the repo to a suitable location on your local server. Make u have the latest stable node and npm installed. To install node and npm, please follow this link "https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/".
2. Running on thelocal server: In the terminal / Command prompt, navigate to the directory of oxy-zone-frontend/ in the terminal / Command prompt. Then run the following commands:

$ npm install

This is to install all the required node modules required to run the app.

$ npm start

This is to start the development server

We will explain the code of the project that we cloned above. As the code is longer and doesn't look nice when added here, we have decided to add links to the code through GitHub.

Project Components:

We will start Frontend(React) first:

1. We will create the project structure like this:

👁 Screenshot20210719155453

2. We will create code for links for thewebsite in App.js

React code:

https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/App/App.js

3. Home page: A page with a simple design that shows the list of oxygen containers sold by sellers, where a search bar is provided for the user to type in the name of the city. For oxygen sellers, there would be an option for them to register on the website and provide details like address and price/cylinder of oxygen.

👁 Image

React code: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Buyer/BuyerHome.js

4. Seller login: A seller login page for oxygen sellers to register themselves. The data is stored in an SQLite database.

Login image:

👁 Image

Signup image:

👁 Image

React code: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Seller/sellerlogin.js

5. Seller Page: Sellers can create the list of oxygen containers along with the price and phone number. The data to be displayed is fetched from the database through a custom-made API using the Django REST framework. The data is displayed based on the nearness to the searcher.  

👁 Image

React code: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Seller/SellerHome.js

6. We have added Map feature as well, to show markers regarding the locations where oxygen containers are sold

👁 Image

React code: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Map/react_map.js

7. Update Profile Page: Sellers can change their profile photo or change their email, password on this page. They can add or change descriptions of themselves.

👁 Image

React code: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/UpdateProfile/Update.js

Backend(Django) now:

To clone the project, navigate to this directory and do the command 'python -m pip freeze > requirements.txt' to install the necessary modules for this project.

We need to install python, and some modules are listed below:

1. django
2. djangorestframework
3. django-cors-headers
4. django-heroku
5. bcrypt

1.We will have the project structure like this:

👁 Image

2.Building APIs for the react app: In the Frontend app within covidproject we created 2 models in models.py  namely Sellers and Places

👁 Image

Next, we create the API endpoints in the views.py. For the API endpoints, the necessary serializers are defined in serializers.py.

👁 Image

3.Running Django server: After completing the code part, to run the Django server:

open the terminal and navigate to the correct directory containing the manage.py script, then run the command:

$ python manage.py runserver

On successful execution, you will get:

👁 Image

So by following these steps, you will be able to run a copy of the website on your own local server 

Video Demo of the app:

Conclusion: With the increasing need to know oxygen sellers in time of the oxygen crisis, this app could help people. The success of this App depends on the people registering and using it. Stay home, stay safe, and get vaccinated!

Authors:

1. Vinu Rakav @statuschangingtheworld
2. Joel Thomas @thomas23