longer readme

site/README.md

@@ -2,6 +2,66 @@
 
 This is an app based on the HeroUI base project, licensed under the MIT license as per the LICENSE file.
 
-## Use
-Create a .env file (in the /site directory) and include a `SESSION_SECRET`, it can be whatever but ideally it should be a 32-char encrypted string. 
-Run `npm install` to install all required packages, then you can run `npm run dev` to have a local version of the site.
\ No newline at end of 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. 
+
+### 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.