Rick and Morty SPA Project 😍 ( React/TailwindCSS )

App Live

App Preview

Description 📝

The Rick and Morty Single Page Application (SPA) is an Application where Users can get to Know the Characters ,Episodes and Locations of the Rick and Morty TV Series.

In This Project, For the Create of Different Routes (Pages), React Router DOM is used, Which Naturally Creates a Much Better User Experience, on the Other Hand To Provide a Beautiful User Interface, a Local Database is Used to Manage and Organize the Information of Characters, Episodes, Locations, Page Information and etc.

The User Can Filter Characters, Episodes and Locations Based on Various Factors such as Name, Gender, Status and etc ; as well as Learn Various Information About Them.

This is an Application Developed with the React.js Library and using the TailwindCSS Framework, On the other hand, This Project is Set up with Vite.

Which is Responsive in the Screen Sizes of Different Devices;

Also Speed of Work by the Tailwind Framework is very high and it results in an Optimal Output.

Getting Started 🚀

To get started with this project, follow these steps:

1. Clone this repository to your local machine:

git clone https://github.com/FarzinKhosravi/Rick-and-Morty-SPA-React-TailwindCSS.git

2. Open the project folder in your code editor.

3. Explore the src folder and check App.jsx file to understand the project structure and styling.

4. In this step, Install the Project Dependencies :

npm install

5. Don't Forget to Start the JSON Server to Create the Local Database, Use the Following Command to Do So :

npm run server

6. Note that in order to apply Development Server, be sure to enter the following command in the terminal editor:

 npm run dev

Usage 📋

• Customize the project to match your specific requirements.
• Add your own content and styles.
• Test the responsiveness on various devices and browsers.

Features ✅

• Dark Mode Feature. (Including All 3 Options Light, Dark and System)
• Added Pagination Feature for Each Page.
• Creating a Hamburger Menu for Responsive Mobile Design. (Display Active Links with Attractive Styles)
• Filter Characters, Episodes and Locations Based on Various Factors such as Name, Gender, Status and etc and Also Reset All Applied Filters. (CRUD Operation on Local Database)
• Display the Status of Each Page.
• Creating a Not Found Page and the Ability to Return to Any of the Main Pages of the App.
• Automatic Deletion Feature of Unnecessary Requests to the Server.
• Display All Characters, Episodes and Locations Filtered and Fetched from the Local Database.
• Fully Responsive on All Devices with any Screen Size.
• Feature of Adding, Removing and Clear All Favorite Characters from the Modal.
• Create an Accordion Menu to Display Characters, Episodes and Locations Details and Also Episodes, Actors and Residents List.
• Change the Application Font.
• Feature to Sort List of Episodes.

Packages 📦

• RRD (React Router DOM)
• Formik (To Management States Related to Pages Filter Forms)
• JSON Server (To Build a Local Database)
• Axios (For All Server Side Requests)
• React-Hot-Toast (To Display Server Side Errors and Loader)
• HeroIcons/React
• React-Icons
• Prettier Plugin TailwindCSS (To Automatically Sort Tailwind Classes)
• TailwindCSS/Forms (A Plugin that Provides a Basic Reset for Form Styles that Makes Form Elements Easy to Override with Utilities)

Tips 📌

• Fully Responsive for Mobile, Tablet, Laptop and Desktop.
• Using the React Router DOM Hooks, Nested and Dynamic Routes and Also Using Routes File for Optimal Management of Built Routes.
• Create a Root Layout Component for Optimal Organization for Fixed Sections of the App.
• Combination of Hooks Context and useReducer is used to Management States.
• Using the Components of Previous Projects and Matching Them with the Conditions of the Current Project.
• Creating Global Dynamic Components.
• Implementation of Click Area Principles on App Links and Buttons.
• Using the Concepts and Principles of AJAX and API Request.
• Using the Concepts and Principles of Clean Code.
• Using the Concepts Component Lifecycle.
• Using the Concepts and Principles React Hooks and Custom Hooks.
• Using the Concepts Local Storage. (To Store and Retrieve Data from the Browser Storage)
• Created API Request Functions and Base URL.

Web Development Technologies 🪄

• HTML5 (Semantic HTML)
• Flexbox and Grid Layout Systems
• TailwindCSS (v3)
• React.js (v18)
• RRD (React Router DOM)
• JSON Server
• Vite
• NPM

Contact Me 📧