Capstone Software Engineering Project, Creating a django based platform to foster community, education, and indentification in the world of reptiles
View Short Feature Demo
View Long Feature Demo
The snakemap is the most backend heavy piece of the web app, it allows the user to select a location on a google maps JS map, with a radius and time range and see all snake observations meeting that criteria displayed on the map.
The backend is comprised of two components, a fetch_observations method that calls the Inaturalist API to recieve a JSON object containing all observations meeting the criteria provided by the front end and formats it to be given to the map.
The main view map_view that renders the template, and calls and passes the fetch_observations if it is given a POST request. Given a post request instead of rendering the template it returns a JSONresponse to the frontend with the formatted observations
The front end logic is handled by the map.js, this file has functions to intialize the map, drop a pin when a double click occurs and pass that lat/long data to the form above the map, render a radius provided in the form with a red circle on the map, send a post request to the backend to recieve observations, and plot the observations on the map with pins containing the observation's data
The FAQ is a very simple component, it has a data model to hold a question/answer and a slug for the url of that question. There are two views, one to render the home page with all the questions, and another view render a template with the answer to the question that was clicked (utilizing slugs for the urls). This app is used to answer common questions that may come up specifically about the web app and features in it.
The identification app is meant to be a dyanmic library of various snake species, their ranges, and many other common metrics to identify them.
The data is stored in two distinct models, a state model that has it's title and abbreviation, as well as a SnakeSpecies model that holds the ID information like Common Name, venemous status, and image path to our static directory which contains photos of all the snakes, as well as a many to many relationship with the state model.
The users can navigate the page with two main methods, a search bar that will try to find species matching the given string, as well as a method to filter just by state. The user also has the choice to sort by ascending and descending alphabetical order.
There is JS in the template that intializies the state dropdown, deals with sorting, live searching, as well as filtering down to a single species if the search value is autofilled (Like when jumping to the ID app from an observation or favorite snake on the profile, it will automatically display that chosen species)
The singular view renders the pages template, with the given "context" (snake and state data) if the page is freshly loaded it will simply display all the snakes found in the US until a specific state is submitted in the form.
This may be the most CODE dense component of the web app, it is a user forum that allows people discuss the hobby and interact with other members of the herping community.
It is broken up into three main templates
- One to display all the boards on the forum as well as the most recent threads, and replies
- A template that renders a chosen board (Displays all the threads on that board)
- Finally a template that renders a chosen thread (The thread itself and all the replies under it, as well as a reply form to add replies to the thread)
Data
- A board model with title and description
- A thread model with a reference to the board it's on, creation time, user who created it etc
- A post model (Similar to thread but acts as a reply to a given thread, so it has a reference to it's parent thread)
- A post image model (This store's and handles photos being attached to a thread or a reply)
Views
- Home - Renders the boards template and passes recent posts/threads to template
- Board threads - Recieves a board id and returns the board threads templates with all the threads corresponding to that board
- Thread posts - Renders the thread template with all the replies and initializes the form for replies
- New threads - Handles the new thread form and creates a new thread (Storing info in DB)
- Reply thread - Same as new thread but handles a new reply to a thread (Storing new info in BD)
- User Profile - Allows link to each user profile attached to a thread or reply
- Delete thread/post - Both of these views handle the deletion of a thread and post handling the DB aspect and confirms that the user who created it is the only trying to delete
- Edit post/thread - Handles post requests to edit either a post or thread, and refreshes the page to update the information after it's changed in the DB
This is another simple and static component of the web app, it is simply an html template using bootstrap cards and drawers to organize information for the users. It is just one view to render the template. This app is meant to give the users a good introduction to the hobby and answer many common questions beginners have.
- The landing point for users on serpent spot. From here users can branch out and explore the site.
- Includes navigation to FAQ, Profile, Identification, Observation Journal, and Forum.
- Provides context and point of entry as well as smooth transition to main features.
- Consists mostly of stlyed cards and buttons that serve as access points to other sections of the website.
- No data is stored on this page, it uses a simple view and template.
- A central point for users to express themselves and serves as a sort of homebase for all of their user uploaded content.
- Users can quikcly see if you're active on the forum, mkaing observations, and ranked on the leaderboard.
- Navigation to the Forum, Observation Journal, ID page, and Leaderboard
- Users can edit their profile picking a favorite snake, bio and profile picture.
- The profile model stores user information: Bio, Profile pic, Favorite snake
- The profile template is built out of styled cards, utilizing template engine to render links to the users observations and forum activity. The associated view grabs recent observations, forum posts, total observations and total forum posts.
- One of Serpent Spot's core functionalities. Users can upload and record snake sightings they've had in the form of their Observation Journal.
- Requires a species ID and a quick note about your sighting, a picture is optional (honors system)
- Users can view others journals, getting an idea of what they have seen and what they though!
- Links to ID page directly for identification help
- The observation journal is built around the observation model. It consists of a species field, observation text, and an optional photo.
- The view serves two purposes, a central place to view your own observations, but also other users from their profiles. Only 6 observations are displayed on the profile, so you will come here to go for the less recent ones.
- template engine handles the modification of the template based on how the page is accessed. An alternate url is used to pass alternate user paramters.
- Here users can keep track of the platforms most frequent snake observers.
- Track your total observations, and try to get ranked on the leaderboard!
- Gives users an opportunity to interact with other user's profiles outside of the community forum.
- Clicking a user on the leaderboard takes you to their profile.
- The leadboard is very view heavy. It querries all the observations for the current month and determines where users rank out of the ten availible spaces.
- Bootstrap cards are used here again to create the leaderboard tiles/positions, with the top three positions being podium colors.
- Template engine is used to handle different cases for the users leaderboard status, announicng ranked status, no observations, or how many more to reach 10th place.
- Login and Registration, built on DJango user auth
- Forum Boards overhaul (Styling, recent posts and threads, layout redesign)
- Individual species view and searchbar on ID page
- Footer (NOT on features list but its not a feature it just looks nice)
- Profile flair (this became the profile overhaul adding activity trackers and links to other page)
https://docs.google.com/document/d/1Kc7SIUizXu0q5t-4hT891A-Xu8t-wZ4boMhwcCVsdco/edit
Front End: Bootstrap 5 (For easy styling) Canvas confetti (For snake confetti effect) Google Maps JS library (For the snakemap feature) Select2 (For ID page searching)
Back End: Django (We also used the built in django models/forms for authentication)
DB: Sqlite when developing locally Postgre when in production
Other: WSGI for production web server