đź›’ Web application for activating local businesses and making your neighborhood a better place
URL | Description |
---|---|
Video demo | Promotonial video related to the project submitted on the Hackovid hackathon. |
Landing | Main website for describing the use of the app and redirecting the user to the proper client. |
Client application | Client portal for making purchases and helping your neighbours. |
Admin application | Local portal for managing the incoming orders. |
API documentation | Documentation related to the Backend API used for both clients. |
Compralocal.cat Ă©s una plataforma de comerç en lĂnia totalment funcional, on els comerços poden llistar els seus productes i els usuaris poden fer comandes a les diferents botigues del barri.
A més, en cas de no poder sortir de casa per qualsevol raó, pots demanar ajuda a la gent del teu voltant perquè et recullin les comandes.
I recorda, queda't a casa, entre tots podem frenar la corva.
A nivell d’arquitectura, el Backend està fet en Python, fent servir Flask com a framework, i és una API feta seguint l’standart de OpenAPI. Pel que fa al Frontend hem dissenyat dues aplicacions web en React (pel client i pel local), que serà portable a mòbils a través de una app nativa en futures releases.
El Frontend està desplegat a Netlifly i el Backend està desplegat a Google Cloud, fent ús del servei de CloudRun,a més d'una base de dades PostgreSQL desplegada a CloudSQL.
Cal destacar que el codi Ă©s el mĂ xim production-ready possible i la majorĂa de funcionalitats disponen de tests. TambĂ© disposem d'un docker-compose per poder generar un entorn de test en local i fer les proves que siguin necessaries.
Podeu trobar més informació sobre l’arquitectura al README del GitHub.
Per a poder provar l'applicaciĂł sense haver de crear noves comptes, es poden fer servir els seguents usuaris.
password | account type | login url | |
---|---|---|---|
[email protected] | elena | Botiguera | https://admin.compralocal.cat/login |
[email protected] | carlota | Botiguera | https://admin.compralocal.cat/login |
[email protected] | albert | usuari | https://app.compralocal.cat/login |
[email protected] | andreu | usuari | https://app.compralocal.cat/login |
This project was built thanks to a team of 4 members.
Carlota and Elena took the responsability of building the 3 clients (landing, client and local) using pure HTML and Bootstrap for the first one and React Hooks for the rest two. Andreu and Albert implemented all the Backend API and made the deployment flawless.
We used almost all the features that GitHub allowed us. We ended up having more than 66 Closed Pull Requests, using Issues and Projects, and making the deployments easier using GitHub Actions. Also, we were integrating all the features using different branches for making the parallelism better.
- Python 3.7+
- NodeJS 13.11+
- React 16+ (using Hooks)
- docker-ce (as provided by docker package repos)
- docker-compose (as provided by PyPI)
To run the whole stack, please execute the following from the root directory:
-
Run the server as a docker container with docker-compose
docker-compose up -d --build
This API is being developed using Python 3.7 as a programming language. We have used Flask and OpenAPI (connected themselves with Connexion library), integrated with Docker compose.
This API is hosted in a CloudRun using the related Dockerfile using a PostgreSQL database (specified below) deployed in CloudSQL. In local, for testing purposes, we deploy the API using uWSGI and Nginx using a replica of the production database inside a Docker container.
The code follows the PEP8 standard, being valided by Flake8, and each endpoint is being valided using unitests. We ended up having more than 150 tests.
For making the deployment easier between versions, we integrated a pipeline using GitHub actions for every commit in the master brach which runs the tests and if it success, deploys to CloudRun.
Usage of virtualenv is recommended for package library / runtime isolation. You should create your virtual environment inside the api
folder.
To run the API, please execute the following commands from the root directory:
-
Change directory to
api
cd api/
-
Setup virtual environment called
env
virtualenv -p /path/to/python env
-
Install dependencies
pip3 install -r requirements.lock
-
Set up environment creating the .env file. This file must have this structure (without the brackets):
DEVELOPMENT_MODE=true DB_USER={DB_USER} DB_PASSWORD={DB_PASSWORD} DB_DB={DB_DB} DB_HOST={DB_HOST} DB_PORT={DB_PORT}
-
Run the server using uWSGI
uwsgi --ini uwsgi.ini -H env
or as a Python module (only for debugging)
python3 -m src.connexion
-
Just run the following command with the
RUN_MODIFICATIONS
flag enabledRUN_MODIFICATIONS=true python3 -m unittest discover -v
Given the fact that we used OpenAPI for making the development easier, we could take advantage to use ReDoc for creating a beautiful API documentation. Actually, it was very useful for making the integration with the Frontend side since the UX team was reading this documentation.
For checking the logs of the whole stack in real time, the following command is recommend it:
docker-compose logs -f
Create a new Python file called test_*.py
in test.api
with the following structure:
import unittest
class NewTest(unittest.TestCase):
def test_v0(self):
expected = 5
result = 2 + 3
self.assertEqual(expected, result)
# ...
if __name__ == '__main__':
unittest.main()
This is the database diagram representing the current Compra Local DB
- MaterialUI 4.9.9+
- Axios 0.19.2+
- React 16.13.1+
- SJCL 1.0.8+
In the project directory, you can run (from each of the available clients):
npm start
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode. See the section about running tests for more information.
npm run build
Builds the app for production to the build
folder. It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
Note: this is a one-way operation. Once you
eject
, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject
at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject
will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject
. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
Apache-2.0 © Compra Local