🛒 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.

Summary

What is this?

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.

Tech specifications

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.

Testing accounts

Per a poder provar l'applicació sense haver de crear noves comptes, es poden fer servir els seguents usuaris.

email	password	account type	login url
hi@elena.dev	elena	Botiguera	https://admin.compralocal.cat/login
hi@carlota.dev	carlota	Botiguera	https://admin.compralocal.cat/login
hi@albert.dev	albert	usuari	https://app.compralocal.cat/login
hi@andreu.dev	andreu	usuari	https://app.compralocal.cat/login

Organization

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.

Requirements

1. Python 3.7+
2. NodeJS 13.11+
3. React 16+ (using Hooks)
4. docker-ce (as provided by docker package repos)
5. docker-compose (as provided by PyPI)

Usage

To run the whole stack, please execute the following from the root directory:

1. Run the server as a docker container with docker-compose

   docker-compose up -d --build

API

Stack

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.

Recommendations

Usage of virtualenv is recommended for package library / runtime isolation. You should create your virtual environment inside the api folder.

Usage

To run the API, please execute the following commands from the root directory:

1. Change directory to api

   cd api/

2. Setup virtual environment called env

   virtualenv -p /path/to/python env

3. Install dependencies

   pip3 install -r requirements.lock

4. 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}

5. Run the server using uWSGI

   uwsgi --ini uwsgi.ini -H env

   or as a Python module (only for debugging)

   python3 -m src.connexion

Run tests

1. Just run the following command with the RUN_MODIFICATIONS flag enabled

   RUN_MODIFICATIONS=true python3 -m unittest discover -v
   

Documentation

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.

Development

Logging

For checking the logs of the whole stack in real time, the following command is recommend it:

docker-compose logs -f

How to add a new test

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()

Database

This is the database diagram representing the current Compra Local DB

Client

Requirements

1. MaterialUI 4.9.9+
2. Axios 0.19.2+
3. React 16.13.1+
4. SJCL 1.0.8+

Available Scripts

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.

Screenshots

Authors

• Elena Ruiz
• Carlota Catot
• Andreu Gallofre
• Albert Suàrez

License

Apache-2.0 © Compra Local