Malker [React + Vite + Flask]

Try it: https://jam-productions.github.io/malker

Backend deployed in: https://jamproductions.pythonanywhere.com

It is also deployed in OnRender (very slow):

• Frontend: https://malker.onrender.com
• Backend: https://malker-backend.onrender.com

Tip

We recommend using GitHub deployment instead of OnRender. OnRender puts the server to sleep and has to wake up, which worsens the user experience.

What is malker?

Malker is a web application designed to facilitate the management of social plans with friends. Unlike traditional platforms, Malker doesn't require users to log in; instead, it operates seamlessly using tokens and shared URLs.

The application architecture comprises React for the frontend, Flask for the backend, and Firebase for the database.

How it works?

Requirements

Make sure you have the following software installed on your system before running the project:

• Node.js and npm: Required for managing and installing JavaScript packages.

  Install Node.js and npm by following the instructions on the official Node.js website.

• Python 3: Required for the backend.

  Install Python 3 by following the instructions on the official Python website.

• Vite: Required for the frontend.

  Install Vite globally using npm:

npm install -g create-vite

Important

We have been using Python 3.10, Node 18 and Node 21. So if your current version does not work, we recommend installing one of these versions.

Setup

You can setup both frontend and backend using Makefile:

make deps

Warning

Makefiles work for MacOS and Windows. You have to do the manual configuration for Linux.

Setup frontend

Using Makefile:

make setup-frontend

Or manually:

npm install

Set-up backend

Using Makefile:

make setup-backend

Or manually:

Navigate to Flask directory

cd backend

Create the virtual environment

python -m venv venv

Activate the environment

On Windows

venv\Scripts\activate

On MacOS

source venv/bin/activate

Install pip packages:

pip install -r requirements.txt

Backup packages

pip freeze > requirements.txt

Firebase key + environment variables setup

You have to download these files:

• Firebase key
• .env file

Note

Only JAM-Productions members have access to these sensitive files.

Put them on backend directory.

Run the app

Run frontend

Using Makefile:

make frontend

Or manually:

npm run dev

Run backend

Using Makefile:

make backend

Or manually:

npm run start-api

Or:

cd backend
python app.py

Testing

Frontend

Using the terminal

Run the following command:

npm run cypress

Using the UI

Start running the command below:

npx cypress open

1. Then select the type of testing (in our case, it's E2E).
2. Select where the tests will run. We recommend using Chrome.
3. Open the specs tab and open the file app.cy.js; this will test the entire application.

Backend

Using Makefile:

make backend-test

Or manually:

cd backend
python -m pytest

Linter

Run the following command:

npm run lint

Format

Run the following command:

make fmt

Format frontend

npm run format

Format backend

cd backend
autopep8 --recursive --exclude venv --in-place .