Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
C
cm2305
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
This is an archived project. Repository and other project resources are read-only.
Show more breadcrumbs
Dean Jukes
cm2305
Commits
1f1d14e1
Commit
1f1d14e1
authored
3 months ago
by
Ethan Walters
Browse files
Options
Downloads
Patches
Plain Diff
Removed now redundant webapp readme - see sites/readme instead
parent
0a69a340
Branches
main
No related tags found
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
README_WEBAPP.md
+0
-89
0 additions, 89 deletions
README_WEBAPP.md
with
0 additions
and
89 deletions
README_WEBAPP.md
deleted
100644 → 0
+
0
−
89
View file @
0a69a340
# 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.
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment