1. Description
2. Ingredients
3. Features
4. Sample Wireframe
5. Sample User Stories
6. Sample Images
7. RESTful Routes
8. Coming Soon

The Cat Cafe website is an ongoing project for the Brooklyn Cat Cafe where I volunteer and from where I adopted my two cats. I was asked to do an overhaul of their current website, but after seeing their code, I realized that it was time to take my freelancing to the next level and actually become a software engineer.

As a client-centric developer, I start by segmenting my audience and build out functionality that matches. For this project, I knew that a great UI and excellent styling would make a boring website with a ton of pictures and forms really pop. My personality shows on the confirmation pages, however, it's fitting for my audience. One unsolved problem remains in this release: when a user creates an account and tries to click on Home, it resets the session and the user has to log in. On the one hand, it's good practice for remembering log in information, but an instant, forced log in isn't my preference. I cut corners by rendering views instead of using redirects, and the bugs started multiplying soon after (all squashed now 🐛). This is something I'll address in the next version since this is meant to be a fully functioning website.

This version allows website visitors to see adoptable cats and each cat's information, submit an adoption form, and create user accounts with different levels of access. The highest level of user access demonstrates all 7 RESTful routes and full CRUD. Have a look for yourself here.

Finally, this version contains navigation menu items that link to the Brooklyn Cat Cafe. I put these items there for a few reasons: 1. The navigation menu looked funny with just three options; 2. It's a reminder for me to pick up where I left off; 3. It's an opportunity for you to learn (if you're interested!) about the first and only cat cafe located in Brooklyn. It's currently the only cat cafe in New York City that was founded by and currently managed by women.

Please refer to the RESOURCES.md file for credit and citation information.

• Languages:

  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • EJS

• Design:

  • Bulma CSS
  • Google Fonts
  • Figma
  • WebGradients
  • PALETTELIST

• Pivotal Tracker

• Build:

  • Atom Text Editor
  • MongoDB / Mongoose ODM
  • Express
  • Node.js
  • postman
  • Heroku

• Read-Only Experience:

  • Viewers can see all adoptable cats on one page
  • Viewers can click on a cat and see that cat's details
  • Viewers are prompted to create an account or log in if they click on the adoption button
  • When a viewer creates an account, they'll see a welcome page and have moved into the next tier of access

• Visitor Experience (Users):

  • Visitors are greeted with a welcome page when they log in
  • Viewers can see all adoptable cats on one page
  • Visitors can click on a cat and view that cat's details
  • Visitors can submit an adoption form
  • When a visitor submits an adoption form, they'll see a confirmation page

• Volunteer Experience (Admin Users):

  • Volunteers are greeted with a welcome page when creating an account or logging in
  • Volunteers' welcome pages are unique to them and contain information regarding their next scheduled shift
  • Volunteers can see all adoptable cats on one page
  • Volunteers can click on a cat and view that cat's details
  • Volunteers can add, edit, and delete cats

• Mobile-friendly, responsive design

• MVC file structure

• Multiple models

• EJS Partials

• Cat puns 😹

Core Website Flow

Account Creation Flow

Sessions

Adoption Flow

• Responsive design improvements
• Accessibility improvements
• Email confirmations
• Identification of adopted cats instead of deleting them
• Adoption stories submitted by adopters with options to like, comment, and share
• Latest "Mews" blog
• Confirmation modals for submissions, edits, and deletions of cats
• Transition to React 🤞