This is a web app created using React and Node.
- Programming Languages: JavaScript
- Frameworks: React.js, Node.js, Express
- Database: MySQL
- 3rd Party Libraries: Axios
- Web Development: HTML, CSS
- Version Control: Git
- API: Rick & Morty API
Users can select the desired number of characters to be displayed, with a maximum limit of 20. This feature provides users with the flexibility to customise the number of characters according to their preference.
Users have the option to like or show appreciation for specific characters on the webpage. By liking a character, users can mark them as their favourites and engage with them in a personalised manner. The webpage also keeps track of the like count for each character, allowing users to see the popularity of different characters.
The webpage allows users to delete characters from the display. This functionality enables users to remove unwanted characters and create a cleaner and more focused user experience.
Users can filter the characters based on their status. This feature enables users to narrow down the view and display characters with specific statuses, such as "Alive," "Dead," or "Unknown." Filtering by status empowers users to focus on specific subsets of characters based on their preferences.
The webpage supports alphabetical sorting of characters. Users can choose to sort the characters in ascending or descending order based on their names. This sorting feature enhances usability, making it easier for users to locate specific characters and navigate through the list efficiently.
Additionally, the webpage provides a functionality to reset the sorting and filtering options. This allows users to easily revert the applied sorting order and filter settings, providing a fresh starting point for their exploration of the characters.
By offering these features, the webpage delivers a dynamic and interactive experience, allowing users to customise their view, express preferences through liking, keep track of like counts, manage character visibility through deletion and filtering, and easily navigate the character list with alphabetical sorting.
The webpage was created by Kanan Garayev, who used this project as his first quick practice using React. This was an opportunity for him to gain in-depth knowledge of Object-Oriented React, understand its fundamentals, and push himself beyond his previous programming experience.
The webpage is very simple but fully responsive and works on all devices. The CSS was built from scratch, without using any external libraries or frameworks.
- Basic React (Object-Oriented)
- Using components
- Passing props (prop drilling), using callbacks and raising state
- Use of API calls
- Additional functionalities such as filtering, sorting, liking, deleting and keeping like count
- Fully responsive on all devices
- Use of CSS from scratch without using any external frameworks (like Bootstrap)
- Use of Redux
- Use of Functional React
- Better styling
- More comments in the code to assist with readability, reusability and maintainability
- Use of CSS pre-processors (such as SASS) to speed up production