The CatWiki App

Solution for the CatWiki challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • Built With
• Features
• How to use
  • Cloning the repos
  • Installing dependencies
  • Configuring your environment
  • Running the API
  • Running the app
• Contact
• Acknowledgements

Overview

Device Mockup created from iPhone mockups

---

The CatWiki let's you search for information and pictures of your favourite cat breed! 🐱 Learn more about their personality, origin, life-span, and much more! You can see the working demo here.

I built this project using Angular, a technology that I've worked with since 2018. I also used Nest, which is an incredible framework I've been wanting to use for a long time! I've also learned a lot about Tailwind, my new favourite CSS framework to work on modern applications!

Overall, it was a pretty fun project to work on. I've learned a lot and revisited a bunch of technologies that I usually don't work with on a daily-basis. It was an excellent challenge proposed by the Devchallenges.io team!

Also, I'm cat lover, onwer of 4 cats 🤎

Built With

• Angular
• Tailwind
• TypeScript
• Nest
• Express
• Prisma
• PostgreSQL

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories:

• 🔍 Search for cat breeds and select a breed of your choice
• 🥳 See the most popular searched cat breeds summary on the homepage
• 🔟 See the top 10 most searched cat breeds
• 📊 See the breed details including description, temperament, origin, life span, adaptability, affection level, child-friendly, grooming, intelligence, health issues, social needs, stranger friendly
• 📸 See photos of the breeds
• 📱 On mobile, when the user selects the search option, a modal for breed search should pop up
• 🔗 Go to an article about cats when clicking on read more on "Why you should have a cat" section
• ➡️ Go to the top 10 cats by clicking "see more" in the dashboard

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer.

🧶 Regarding the package manager

For better compatibility, we recommend using yarn as your main package manager, since the project was built using it. You can try running the project with npm, and it will probably run fine. But beware that there might be bugs or unexpected behaviours in the application.

Cloning the repos

From your command line:

# Clone the cat wiki api repository
$ git clone https://github.com/mazyn/cat-wiki-api

# Then, clone this repository
$ git clone https://github.com/mazyn/cat-wiki-app

Installing dependencies

After that, CD into the api folder, then install the dependencies by running:

$ yarn

Or with npm

$ npm install

Configuring your environment

Next, you should configure an .env file, using the pre-existing .env.example file in the project as a template. If you want to know more about dotenv files, you can read this article about it.

Be aware that you'll need a PostgreSQL instance running on your local machine, or on Docker, for the API to run properly. After that, you'll just need to set the DATABASE_URL in the .env file.

You'll also need an API key from the https://thecatapi.com, so make sure to go there and get your key!

Running the API

To run the app, first start the API service on development mode. This will start the service listening on PORT 8080 (you can change this in the .env file):

$ yarn run start:dev

You should see an output similar to this:

[3:54:26 PM] Starting compilation in watch mode...

[3:54:28 PM] Found 0 errors. Watching for file changes.

[Nest] 217982  - 08/30/2022, 3:54:29 PM     LOG [NestFactory] Starting Nest application...
...
[Nest] 217982  - 08/30/2022, 3:54:29 PM     LOG [Bootstrap] Environment: DEVELOPMENT
...
[Nest] 217982  - 08/30/2022, 3:54:29 PM     LOG [Bootstrap] 🚀 Server ready at http://0.0.0.0:8080

Running the app

Lastly, to run the app, CD into the cat-wiki-app folder. Then, edit the src/environments/environment.ts file, and replace the catApiUrl property with the url of the API you just started. Like so:

  catApiUrl: "http://localhost:8080/v1" // don't forget to add the "/v1" at the end!

Install the app dependencies:

$ yarn

Then, just run the app 😉

$ yarn start

You should see an output like the following:

** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

That's it! Now you have the CatWiki App running locally on your machine! 🥳

Acknowledgements

• Steps to replicate a design with only HTML and CSS
• Node.js
• Chalk, for adding colourful logs
• lodash, for making array mutations easy
• Angular Universal, for SSR
• Swiper, for photo gallery
• @ng-select, for easy management of select dropdowns
• aos, for incredible on-scroll animations

Contact

• LinkedIn https://www.linkedin.com/in/gilmar-alves-filho-46bb40164
• GitHub @mazyn

If you wanna help me, you can buy me a coffee! ☕