Inspired by the popular Reddit and Facebook communities, Catspotting is an app for cat lovers, by cat lovers! Users can create an account, then sign in and post photos and info about cats they spot in the wild!
On the landing page, the user may either create a profile or sign in if they already have one. They will then be taken to the posts page, where they can view all the cat posts! Users can create/edit/delete their own posts from here, or they can look at other users' posts.
For our mockups and other planning info, see our planning repo For the API, see our back end repo
The Catspotting team primarily used a centralized git workflow to build the app. Once it became clear that the back end was its own massive endeavor, we split up, with Jaimie on the back end and Jordan writing the majority of the front end code.
- React
- React Router for navigation
- React Hooks
- Fetch for API calls
- Material UI, Flexbox for styling
- Originally we were storing tokens in localstorage, but that was not working well for us. Asha Misra pointed us in the direction of useContext and Jennifer Meade helped us implement that. Currently tokens are stored in UserContext and persist through the entire app!
- App is not optimized for mobile
- Cannot make/edit/delete comments (hasn't been built yet)
- Comments do not display username (need to fix models in backend or add additional fetches to front)
- Signin button only works on click and not on enter
- On reload, post/:id logs user out but still displays page (minus header), should not logout on reload or if it does, they should be directed to the signin page at least
We achieved roughly our bronze level of functionality and design, with features including:
- Welcome page where users may create an account or sign in if they already have one
- JWT authentication
- Users can post photos of cats they spot, with an image url, and edit/delete only their own posts
- Users can see all cat posts on one page, or see each post on their own individual page
- Responsive design using Material UI
- About page with info about devs, links to github, overview of app
In the future, we aspire to add the following functionality:
- Create, edit, and delete functionality for comments
- User profile page displaying that user's activity
- Improve design responsivity
- Add links to cat related resources on About page
- Testing
- More advanced color palette transitions
- Likes for comments and posts
- Bookmark posts
- Google Maps for location integration - user can pin spotted cat's location
- Search posts by location/cat
- Display map with all pins for that cat on post detail page
- Map view showing all posts as pins, can click a pin and will take you to that post
- Groups for users based on location
- Ability to share posts externally
- Fork and clone this repo
- Open your terminal and go to the directory you want to store this application and ‘git clone’ it
- Run npm i to install all dependencies
- Run ‘npm run start’ to open the app in browser
- Code away! If you wish to add a new feature to the currently existing application submit an issue detailing your changes
Flexbox guide
Coolors palette
LogoMakr for all cat icons and illustrations
Material UI for forms
useHistory
Ben Awad's useContext Tutorial
BookBear
Special thanks to:
- Jennifer Meade for guiding us toward UserContext over local storage, and helping us fix Post creation
- Asha Misra for moral support through the JWT nightmare, and for sending us Jen's JWT/useContext edit of BookBear, which we perused to get a better sense for how useContext works.