🌟 Wiki For Fans

📖 Description

Wiki For Fans is a web application that allows users to explore information about their favorite characters. The application is designed to provide rich details about each character, making it the ideal reference for fans.

💻 Technologies Used

  • ReactJs: A JavaScript library for building user interfaces.
  • Vite: A build tool designed to offer a faster and more efficient way to develop applications.
  • React Router: A routing library for React that aids in navigating between different components.
  • TailwindCSS: A CSS library for building custom user interfaces without having to leave the HTML.
  • NodeJs: A JavaScript runtime environment that lets us execute JavaScript code on the server side.
  • Express: A minimalist framework for NodeJs, offering tools for building web applications.
  • Nodemon: A tool that helps in developing node.js based applications by automatically restarting the application when file changes are detected.

🛠 Installation and Initialization

Prerequisites

Ensure you have NodeJs and npm installed on your machine.

Steps

  1. Clone the repository

    git clone [repository-link]
    cd repository-name
  2. Install dependencies

    In the main project directory, run:

    npm install

    If you're using yarn:

    yarn install
  3. Start the application

    npm start

    Or, if you're using yarn:

    yarn run

The BackEnd of the application will run on http://localhost:3000. The FrontEnd doesn't have an exact port to run on, but the local route will be displayed on the dashboard.

🚀 Features and Usage

Upon accessing the application, you'll be greeted with a user-friendly interface that lists all available characters. Each character entry provides an image and a name.

  • Search: At the top of the page, there's a search bar. Here, you can type in a character's name to quickly filter the list.

image

image

  • Character Details: By clicking on a character, you'll be redirected to a page with more extensive details about that specific character, such as age, height, gender, main techniques, and chakra elements.

image

  • Navigation: On the details page, there's a "Back" button that will take you back to the main character list.

image

📱 Responsiveness

Our application is designed with mobile-first principles in mind, ensuring an optimal viewing experience across a variety of devices. Whether you're accessing the Wiki on a phone, tablet, or desktop, you'll receive a seamless and user-friendly experience tailored to your device's screen size

image

image

🎉 Conclusion

Wiki For Fans is the perfect solution for fans who want to get detailed information about their favorite characters all in one place. Dive in and immerse yourself in the world of your favorite characters!