by Kim Robinson
Initiated April 15, 2024
- Readme - Client Side (User experience walk through and documentation)
- Readme - Backend API (User authentication, API Endpoints, Django Admin)
- About the Project
- Getting Started
- Miscellaneous
Myco Matrix is an application where users can register for field trip lotteries, connect with other members and access resources to ensure their foraging experience is safe and permitted.
The Myco Matrix allows users to register, sign in, and edit their profile information. They can register for upcoming field trips with one button click and access resources such as packing lists and permits needed by location (in the Pacific Northwest). Administrators and users within the Coordinator and Leader groups can create, edit and delete field trips as well as manually run the lottery with one button click. The lottery randomizes registrants and assigns them their trip status (accepted, waitlisted, rejected). The automated lottery function emails the registrants their status once the lottery is complete and emails the trip leader the group's contact information. Stretch goals include incorporating the existing mushroom information in the database to attach mushrooms seen on field trips and have that data visible, as well as a fully functional comment thread on each field trip, for users to connect with other users. (See other stretch goals at bottom of Readme).
This project was inspired by my years spent as the volunteer field trip coordinator for the Oregon Mycological Society. I have a strong desire to streamline and automate the process while freeing up volunteer time for other efforts. My long-term goal is to integrate this project into their website to be used for future field trips and provide archival knowledge and encourage more member connection and community.
POST /trips/10/register HTTP/1.1" 400Once a user registers for a trip, the page disables the register button and lets then know they have registered for the trip. If they navigate away from the page and back, it is the same. If they refresh the page /trips/{id} right after they register, they are offered the registration button again and can sign up for the trip. I have error handling in the api endpoint that won't allow the user to register twice and in react, an error message has been created to address this error. (if the user leaves the page and comes back, it is functional.)- MushroomList: issue displaying image-console log says the cookie will expire. The issue is not related to storing the URLs, but to the same-origin policy of the browser, which restricts how resources loaded from different origins can interact. Look into GoogleCloud Storage and django-storages library
- Issue with state updating: after lottery closes, can navigate to dashboard but trip status is not updated unless I refresh the page, then it is fine.
- Chrome console warning: Reading cookie in cross-site context will be blocked in future Chrome versions. Once deployed in https, try: cookie = "name=value; SameSite=None; Secure"; (currently: response.set_cookie('auth_token', token.key, httponly=True, samesite='None', secure=True))
- There is an issue when entering the lat/long in create trip form, the default is set regardless if something is entered. Would prefer a more user-friendly way to get location than form input (Take location name and input gps coordinates on backend?)
Please report any issues or bugs
To view or edit the code, you will need a code editor or text editor. The open-source code editor we used is VisualStudio Code.
- Code Editor Download: VisualStudio Code
- Click the download most applicable to your OS and system.
- Wait for download to complete, then install -- Windows will run the setup exe and macOS will drag and drop into applications.
(Optional) Download and install VS Code RestClient extension
(Optional) Download and install [Postman] to test API calls(https://www.postman.com/downloads/).
I highly recommend you download this package manager to install software.
In terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
In terminal:
$ brew install python@3
(Note: pip is included with Python-it is the standard package manager for Python)
I used PostgreSQL database for this project and pgAdmin as my graphical interface. You are welcome to use the SQLite database that comes built into Django, but it is not as scalable as an option for a database.
If you use a database other than PostgreSQL, you will need to update the database settings in settings.py
- To install:
$ brew install postgresql - To start the server:
$ brew services start postgresqlor$ brew services run postgresqlto have it not restart at boot time` - To connect to the database:
$ psql postgrespgAdmin(optional) - Install pgAdmin (Administration and development platform for PostgreSQL)
brew install --cask pgadmin4
You will need your own API key if you want to have the weather report functionality that is present on the TripDetails page.
Go to https://openweathermap.org/api, register for an API key and put it in the .env file you will create later on.
- Navigate to the repository.
- Click the
Forkbutton and you will be taken to a new page where you can give your repository a new name and description. Choose "create fork". - Click the
Codebutton and copy the url for HTTPS. - On your local computer, create a working directory of your choice.
- In this new directory, via the terminal, type
$ git clone https://github.com/kimmykokonut/Capstone. - Run the command
cd Capstoneto enter into the project directory. - View or Edit: On your terminal, type
$ code .to open the project in VS Code.
- In VSCode Terminal: navigate to
clientdirectory - Enter
$ npm installto compile the application's code and install all needed dependencies. - Run local server:
$ npm run dev(This will be located at: http://localhost:5173/)
- In VSCode Terminal: navigate to
apidirectory. - Make sure the .gitignore in the root directory has .venv in it.
- Create a virtual environment
$ python3 -m venv .venv - Enter the virtual environment
$ . .venv/bin/activate - Install packages and dependencies
$ pip install -r requirements.txt
- Run backend server (http://127.0.0.1:8000)
$ python manage.py runserver
- To exit virtual environment:
$ . deactivate
- Make sure the .gitignore has .env in it and is committed before step 2.
- Create .env file in the root directory for the backend api.
- Add in the following fields with your own personal information: (note host and port may differ depending on what service you are using)
SECRET_KEY = '{YOUR-KEY}'
DB_USER='{YOUR-USER-NAME}'
DB_PASSWORD='{YOUR-DATABASE-PASSWORD}'
EMAIL_HOST='smtp.gmail.com'
EMAIL_PORT=587
EMAIL_HOST_USER='{YOUR-SENDER-EMAIL}'
EMAIL_HOST_PASSWORD='{YOUR-SENDER-PASSWORD}'
- Create a .env file in the same directory level as package.json (In my file structure this is Capstone/client)
- Add the following field with your personal API key
VITE_WEATHER_API={YOUR-API-KEY}
Django has built in migrations that make it easy to update database changes.
- Create a new database:
- In pgAdmin: In the ObjectExplorer, right click on Databases and choose Create>Database. Give it a name and save the database.
- or
- In the terminal shell via psql:
$ psql postgrespostgres=# CREATE DATABASE <your_database_name>
- Navigate to Capstone/api in the terminal.
- Make migrations to update database schema
$ python manage.py makemigrations - Update database
$ python manage.py migrateNow you should have your database schema all set!
- Finish styling
- Add listener to trigger lottery based on closing date to replace the current button to manually make the lottery happen
- Enhance trip details page for trip leader to add mushroom species seen on trip (Mushroom component exists in database, currently seeded with 20 species)
- Build out full CRUD for /mushrooms
- Add a field to trip model for weather to save the day's weather to display in place of the forecast once the trip came comes (another listener to set the state). Then hide forecast.
- Add cloud service where users can upload photos to be display on trip detail page, or embed instagram tagged-photos
- Flag banned users to block from applying field trips for a set period of time (status?='blocked')
- There might be a bug if there is more than 1 coordinator in database for auto-email? Untested.
- 100% line coverage for testing. Haven't tested the actual lottery data because it is random-but testing passes for the right number of people chosen per category. Most endpoints and all business logic are tested with Django TestCase class
- Make lottery weighted. Might need more dummy users and more trips to test.
- Add chart.js for data visualization (for ? # people applied on trips over time...# species seen)
- Integrate google calendar
- Add google sign in functionality
- Add functionality for forgot password link
- Stricter password rules?
- Have user do full registration at sign in for one less click?
- Integrate into OMS existing website, wildmushrooms.org
If you have any feedback or concerns, Report Bug Request Feature
GNU General Public License v3.0, See license.md for more information
Thank you to the Oregon Mycological Society, a volunteer based nonprofit group in Portland Oregon that I am proud to be a member of. I am grateful for the community I am part of with them.
- in deploy mode: change views-/signin & /signup: secure=False to TRUE once in https
- may need to rewrite tests now that i've switched from Token header auth to Cookie holding token in browser