Rongoā Website

A website to dynamically display information about various New Zealand plants and their usages

Explore the docs »

View Demo . Report Bug . Request Feature

Table Of Contents

• About the Project
• Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• License
• Authors
• Acknowledgements

About The Project

This project is built on top of Next.js and a SQL database to create a website that informs users about various New Zealand plants and their uses. The website aims to display this information in an interesting, entertaining and interactive way with the site being accessible to a wide range of users on mobile or PC. The plants are stored in a SQL database which the website uses to dynamically generate the contents for the pages from, with it heavily relying on the ID of the plant to do most things. Additionally, an API is provided to interact with the database connected to the site allowing for the user to search for a plant or download a plant's information. Parts of the API that modify data are restricted behind user authentication, either in the form of an API key or a whitelisted email in the auth table of the database.

Built With

The site uses many plugins from npm and utilises nodes.js as the backend. Next.js is used to render the site and is deployed with Vercel hosting.

• Next.js 13
• Vercel
• Node.js

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

The website requires npm and Node.js

• node.js
• npm

Installation

1. Website Setup:

• Clone the repo

git clone https://github.com/maxtyson123/13_DGT_WEBSITE.git

• Install NPM packages

npm install

• Copy the '.env.example' into a new file '.env.local'

1. Database Setup (Pick one and edit constants.ts to select which one is being used)

2. A) Postgres:

• Setup a Postgres server PostgreSQL
• Copy the config into .env.local
• Run the SQL file create_tables

1. B) MySQL:

• Setup a MySQL server MySQL
• Copy the config into .env.local
• Run the SQL file create_tables

1. FTP Setup:

• Download FileZilla or any other FTP provider
• Copy the config into .env.local

1. GitHub Setup:

• Go to GitHub Apps and press 'New App'
• Set the GitHub App name to Rongoā
• Set the homepage and callback URLs to your site, e.g.

http://localhost:3000/api/auth/callback/github

• Under account permissions set Email addresses to read only
• Once completed creation, create a new client secret
• Copy the config into .env.local

1. Other OAuth Setup:

• Follow NextAuth.js's documentation to set up other OAuth providers

1. Run the site

 cd website
 npm run dev

Usage

Accessibility Settings

To change accessibility settings of the site, click on the credits chip in the bottom left to open a pop-up where you can toggle dark mode or dyslexic mode.

Users

[TODO] To whitelist a user, go to the /admin page and enter the email of the user you wish to whitelist. Once you are finished, press the add button.

You will first have to manually set your account to type 2 in the databse

To add an api key, go to the user profile page and press the generate api key button. This will generate a new api key for you to use.

Create Plants

Go to the /plants/create page and enter the information for the plant. Once you are finished, press the upload button, or if you wish to continue creating the plant later, press generate JSON (note: images and attachments will have to be selected again).

Edit Plants

Go to the /plants/create?id={id_of_plant} page and edit the information for the plant. Once you are finished, press the upload button, and it will modify that plant.

For more examples, please refer to the Documentation

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learned, inspire, and create. Any contributions you make are greatly appreciated.

• If you have suggestions for adding or removing projects, feel free to open an issue to discuss it, or directly create a pull request after you edit the README.md file with necessary changes.
• Please make sure you check your spelling and grammar.
• Create individual PR for each suggestion.
• Please also read through the Code Of Conduct before posting your first idea as well.

Creating A Pull Request

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the BSD License. See LICENSE for more information.

Authors

• Max Tyson - Built Website

Acknowledgements

• ShaanCoding
• Othneil Drew
• ImgShields
• Fort Awesome
• Three JS
• Next Auth
• React
• Quill