Zoolodex

Table of Contents

1. Introduction
2. Technologies
3. Documentation
4. Component List
5. Development
6. How To use
7. What I learned
8. Future Plans

Introduction

Zoolodex is a full stack application that serves as an educational platform to satisfy curiosity towards wildlife and nature. You can browse articles to understand the origins, traits, and modern influence of the animal kingdom on their ecosystems. You can discuss these articles in a comment section as well. If you're interested in browsing a region these animals may be located in, there is a gallery of regions to choose from. Don't see an animal or region you love or would like to know more about? Submit a suggestion on the website to let me know! If you want to know if it's been suggested already, you can view the suggestions submitted by users filtered by animals or regions. If you want to quickly find the animal or region you're looking for. You can view your own details regarding just your suggestions, and soon your most recent sighting. Don't know where to start? The splash and home page will give you some direction!

Explore your curiosity with Zoolodex here!

Technologies

• Docker
• PostgresQL
• Flask-SQLAlchemy
• AWS S3
• React
• Redux

Documentation

• Database Schema
• Redux State
• User Stories
• Feature List
• API Routes
• Frontend Routes

Component List

Development

1. Clone the repository at https://github.com/ShawnBoyle7/Zoolodex
2. Install depdencies

pipenv install --dev -r dev-requirements.txt && pipenv install -r requirements.txt 

4. Set up your postgreSQL user and database.
   
   
5. Create the .env file. You can use my env example as a reference, ensure your settings match your local database from last step.
   
   
6. Enter your virtual environment, migrate and seed your database, then run the backend application.

pipenv shell

flask db upgrade

flask seed all

flask run

7. Enter react-app and install your dependencies, then run the frontend application.

npm install

npm start

How To Use

Landing Page

When you first load up the website, you'll encounter this splash page where you can sign up or log in.

You will need to be signed in to post suggestions or comments, but anything else is open to all users. If you'd like to try out those features feel free to use the Demo!

Galleries

After navigating to the animals or regions tab in the navigation bar, you'll encounter a gallery page.

Here you can click on a card for an animal or, or if on the regions page, a region. This wil redirect you to the page for that animal or region. The region page is not yet implemented.

Animal Page

Here you can read about the origins, traits, or the effects the animal has on their ecosystem. Let me know what you think in the comment section!

Suggestions

Is there an animal or region you'd like to see? You can post a new suggestion to me in the upper right on the navigation bar.

You can also see other user's suggestions on the suggestions tab! There you can edit or delete your suggestions you see listed.

Profile

If you'd like to see just your own suggestions and update them there, or change your user information, you can visit your profile by clicking the profile button in the right section of the navigation bar.

What I learned

• I solidified a strong understanding of workflow and pace with this project. Initially, I set some goals for extra features that I thought I'd have plenty of time to implement. I realized with time how much I really need to get from point A to B in a sprint. There's a lot more that I want to implement that I haven't gotten to yet, but I will be ironing them out as time goes on.

• Throughout this project I got much more familiar with external technologies such as AWS. I've found myself enjoying the process of reading about the properties of an API and what you can really do with them. I've gotten a stronger skill at reading completely foreign API's and integrating them as needed.

• I learned to love Python & Flask-SQLAlchemy. Python and this extension were still pretty new to me as I began this project. I found this project to be a very effective way for me to understand how to practically use associations in SQLAlchemy to set up a powerful Redux store. Being able to load up my frontend data to be quickly accessible from my backend relationships makes the data management in my React components very simple.

Future Plans

• In the future, I'll be integrating a Google Maps API represented at the center coordinates of said region. You will be able to explore this map to see the locality of a region, as well as post or view live sightings of wildlife in that region represented as a clickable node with coordinates on the map. These nodes contain photos and a description of the sighting which you'll be able to comment on as well.

• Additionally, I'll be implementing a search feature which you can filter by many criteria such as a region's name, climate or continent, or traits of an animal such as their name, regions or physical attributes.