Catbnb: An App for our Cats when they Want Some Significant Hang-Outs!
There’s one secret only known by a small number of people: cats sometimes try to use our devices. Since their intelligence is upgrading rapidly, I think one day they’ll be totally able to have their own PCs or smartphones. In order to occupy the blue sea, I decided to make an app for cats (and their cat-care givers). After observing some cats’ daily life, I found a truth: they need a platform for high-quality hang-outs!
(Actually, it’s just a web application inspired by Airbnb, for practicing full-stack development)
Requirement Analysis
Based on current trip sites like Airbnb, my instructor and I found that there should be four main CRUD features for the site: spot, booking, review, and image. So I wrote the user stories. My instructor and I also designed the backend routes based on the user stories, with the expected JSON response. I wrote them on GitHub wiki with Markdown language, so the paragraphs with coding blocks are very friendly for people reading them.
Based on the API Routes, I designed my database, which could support the CRUD features, by drawing a database schema with dbdiagram.io. Then I uploaded it to the GitHub wiki as well. I also planned for the Redux states, an expectation of the information a browser should keep on track.
Techniques for Development
According to my tech skill and the requirement, I decided to use the following tools:
Backend — Node.js, Express.js, with Sqlite3 and PostgreSQL, and the DB is connected with Sequelize.
Frontend — React.js with Redux.js for state management, and Redux-thunk as the middleware. Also, general web development tools like HTML/CSS are included.
SDLC
Because of the learning schedule, I have to finish all the backend routes, then 2 MVP features. What I did was choosing spots and booking as my MVP features. In order to avoid a waterfall schedule and a pile of bugs, I decided to do a unit test after one entry point is finished, and a module test when a feature is totally implemented.
So, an Agile strategy with Kanban was introduced. When implementing the backend routes, I put my tasks on the Kanban tool called GitHub Projects. There were five columns: Backlog, Next Tasks, In Progress, In Review, and Accepted. A task will be placed in the appropriate column based on my work status and the result of the code review.
After finishing all of the backend tasks, I had a review talk with the product manager of the frontend, and found that some of the API design wasn’t very friendly to frontend development. So I took the related tasks back to the “Next Tasks” column and started another development cycle as mentioned.
Also, during the front-end session, we were using the Scrum strategy. The everyday startup discussion and daily wrap helped me a lot with tracking my progress.
VCS
I was using Git and GitHub for version control. Each time I’m developing a feature, I’ll create a new branch, test it in the dev environment until it passes my own test, then I’ll merge it to the main branch, push it, and tell Heroku to copy the code; then it could build, release and deploy the app to the prod environment.
Build with NPM
NPM is an excellent dependency management, since we could just pack our code to the VCS, and with our pre-set instruction CLI commands, an “npm install” will run and download all dependent libraries from the npm server, based on our package.json file:
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"js-cookie": "^3.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-images-uploading": "^3.1.7",
"react-redux": "^8.0.2",
"react-router-dom": "^5.3.3",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1"
}Also, for the full-stack development, we could add script indications in the package.json in the root folder like this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"install": "npm --prefix backend install backend && npm --prefix frontend install frontend",
"heroku-postbuild": "npm run build --prefix frontend",
...
},Since there was no automated test in my project, we could tell npm that when someone attempts the “npm test”, we could send an error message.
User Authentication & Authorization
On the frontend page, users can log in to the website by clicking the profile button, and choosing the specific one shown on the screenshot. There is also a demo user login button for anyone who wants to get familiar with the system.
On the backend side, the authentication features are simply implemented with SQL queries. For password protection, the bcryptjs encryption library was introduced. Also, we use cookie-parser to store the login cookie, which is encoded with JsonWebToken(JWT). Security protection libraries are included as well, like cors, csurf, and helmet.
Spot, Cart, and Review CRUD
The main page itself shows a query result of all spots. Users could also visit their bookings and spots with the logged-in profile menu. The spot details, spot creation, and booking creation are only accessible to logged-in users; the update and deletion for spots, bookings, reviews, and spot images are only accessible to their owners.
The authorization is supported by express utilization middlewares developed by myself, which compares the user id and the owner id of the thing queried with the RESTful action, and decides the user accessibility based on its result. It prevents unauthorized access, which might harm the site’s reliability.
Image Upload and Storage
In order to have a stable storage and load speed for the images, I decided to store them in the AWS S3 server. Since it is simple storage, there weren’t too many things I had to configure by myself. All I could do was use the awsS3.js library and glue it together with the RESTful API express middleware. After creating a bucket, I’ll assign the name of the bucket, then add the keys to environment variables. This easy configuration will make it possible for the images to be safely stored, and fluently performed.
Finding Problems with Heroku Log
Since I was using sqlite3 in the dev environment but using PostgreSQL in the prod environment (this gave me more chances to learn about prod environment debug and hot-fix, including finding bugs during the operational session), sometimes a unit running well in the dev env will not act successfully in the prod env. In order to find out what’s wrong with the prod env, the log message will be critical to us. Luckily, Heroku offers a UI for us to see the logs, with which I found out a lot of tricky bugs only happen in the prod environment. It also showed me the importance of keeping paying attention to the difference between environments.
Finally…
We all know that currently, it’s impossible for a cat to enjoy such a web application. However, as a super cat lover, I really hope that all cats can enjoy a better life. I’ve read some articles about Feline Ethology, and found that cats in an area will have a party every couple of days. That’s the inner inspiration of this app.
After walking all these through, I found that I’ve used many technical skills I’ve never realized. That gives me the impression that, sometimes, we are stronger than we thought. Maybe that’s the surprising reward of learning and practicing.
