Skip to content
Snippets Groups Projects
Commit 1f1d14e1 authored by Ethan Walters's avatar Ethan Walters
Browse files

Removed now redundant webapp readme - see sites/readme instead

parent 0a69a340
Branches main
No related tags found
No related merge requests found
# EcoSort Web App
This is an app based on the HeroUI base project, licensed under the MIT license as per the LICENSE file.
## Recreating the Web App
Navigate to this directory in your shell of choice, then run `npm install` to
install all required packages for the site. This may take a while.
Add a .env file to the directory, consisting of the following.
```
SESSION_SECRET=secretword
DATABASE_URL=postgres://neondb_owner:npg_4y5eOQkbnVsg@ep-dry-tree-abeicwnr-pooler.eu-west-2.aws.neon.tech/neondb?sslmode=require
```
The site is now ready to run locally, and will connect to the Postgres database
without issue.
Run `npm run dev` then navigate to http://localhost:3000 to view the site.
## Libraries Used
- [HeroUI v2.7](https://www.heroui.com/), used for UI components to make the site look pretty.
- [BCrypt for Node JS - 5.1.1](https://www.npmjs.com/package/bcrypt), used to hash passwords for secure storage.
- [d3 - 7.9](https://www.npmjs.com/package/d3), for displaying the dashboard bar chart.
- [Next JS 15](https://nextjs.org), for the website's server model, building on React
- [React 18](https://react.dev), for the site's frontend mattter
- [Zod 3.24](https://www.npmjs.com/package/zod), used to validate the Signup form information
- [Postgres 3.4 for Node](https://www.npmjs.com/package/postgres), used to query the Postgres database.
Used for Hosting:
- [Vercel](https://vercel.com), for the site, allowing for access anywhere.
- [Neon](https://neon.tech/), for hosting of the Postgres database.
### App folder
The App directory is the main location of code for the web app. This contains
JSX representations of all pages, in named subdirectories, and the Actions and
API endpoints.
The Actions folder contains operations to authorise the user
and provide and manage a session.
The API folder provides the Increment route, which is called by the EcoSort
device to update the database.
The Lib folder contains common definitions such as for types. The functions
to manage the user's session are found here.
The Dashboard, Login, and Signup folders contain JSX pages for each of the three
main functional pages on the web app.
### Components folder
The Components folder contains reusable React components, which are defined in
JSX and are used to provide data to the user, where the component would make
code more streamlined or to hold unique state.
Detail Display displays data associated with a single device, with an option
to switch device, and the recycling score and leaderboard.
Device Details handles fetching all of a user's devices, allowing for the
component to be rendered on the server, reducing processing time. The devices
it retrieves are then passed to the client, which will display them in a
Detail Display
Navbar is the component for the site's navbar, which changes dynamically based
on the user's session, and the width of the display the user is viewing on.
This is added to by NavbarProvider, which is able to get data from the server
to pass to this component in relation to session, as it is rendered on the
server.
### Database folder
The Database folder contains all functions relating to the database, to abstract
the SQL queries away from the actual code. This provides more ability to
iterate over database code. Functions are clearly named, and return descriptive
errors.
A dummy data file describes the data initially posted to the database, including
example usernames and passwords that can be logged into on the site.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment