evanlab02 / shoppinglistapp-fe

Frontend documentation

This is the documentation for the frontend of the project. It is created with vite and react and is used to create a dashboard for the shopping list app. The entire front-end is not developed with only react and most of the pages will be using django-templates.

The reason we use react for the dashboard is because I am more familiar with react and really wanted the dashboard to fit a certain style. The dashboard is also the only part of the front-end that will be using react.

Getting started

.env file

You need a .env file in the frontend directory with the following variables:

VITE_REACT_NAMESPACE="shopping"

You could change the namespace to whatever you want, but it is recommended to keep it as shopping. If you change the namespace you will also need to change the namespace in the server. The namespace is used to separate the different apps in the project. If you not supply .env file, it will default the namespace to shopping.

Running the project

To get the front-end running on your machine you will need to have node installed. You can check if you have node installed by running node -v in your terminal. If you do not have node installed you can download it from here.

Once you have node installed you can run npm install in the frontend directory to install all the dependencies. Once the dependencies are installed you can run npm run dev to start the development server. The development server will be running on http://localhost:5173.

As this front-end is still very early in development there is not much to see yet, and no need to setup proxy as the front-end is not yet connected to the back-end.

Building the project

To build the project you can run npm run build. This will create a dist folder in the frontend directory. This dist folder can be used to serve the front-end with nginx or apache. We host it using Caddy.

Why vite? Why React?

To try something new, also its really fast.

I am more familiar with react.

Why not use react for the entire front-end?

I did not want to use react for the entire front-end because I really wanted to lean into django and use django-templates. I am already quite familiar with react so this was just for a bit of fun away from django.

Developer documentation

Please find more docs here: Developer documentation

Changelog

Please find the changelog here: Changelog

shoppinglistapp-fe's Issues

Migrate to node 20

Updates For Portal

Developer Documentation - FE

Overview Documentation - FE

Frontend Repo Updates for BE V0.14.0

Add testing

Update dependencies