Skip to content

felagund1789/nes-character-selector

Repository files navigation

NES Character Selector

A simple web app built with React and styled using NES.css to give it a nostalgic NES look and feel. This app allows users to select their favorite NES character from a list and displays a short description along with the games in which the character appears.

React TypeScript Vite

Table of Contents

Installation

To run the project locally, follow these steps:

  1. Clone the repository:
git clone https://github.com/felagund1789/nes-character-selector.git
cd nes-character-selector
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev

The app should now be running on http://localhost:5173.

Usage

To use the NES Character Selector, start the development server and navigate to the provided local URL in your browser. Once the app is running, you can explore the character selection screen, choose your favorite NES character, and view their details, including a brief description and a list of games they appear in.

Features

  • Character Selection Screen: Users can choose their favorite NES character from a list.
  • Character Information: Upon selection, a short description of the character and a list of games in which the character appears are displayed.
  • Submit Button: A button allows users to submit their selection and display a success message.
  • Error and Success Messages: Error and success messages are shown in order to inform users about the validity of their submission.
  • Favorite Power-ups: Using checkboxes the users can select their favorite power-ups associated with the chosen character.
  • Responsive Design: Users can enjoy a responsive UI built using CSS @media queries, ensuring a great experience on both desktop and mobile devices.

Contributing

Contributions are welcome! Please follow these steps:

  1. Clone the repository.
  2. Create a new branch (git checkout -b feature/your-feature-name).
  3. Make your changes.
  4. Commit your changes (git commit -m 'Add some feature').
  5. Push to the branch (git push origin feature/your-feature-name).
  6. Open a Pull Request.

Acknowledgements

  • NES.css for providing the CSS framework that brings the nostalgic NES style to the web app.

Built as a proof of concept to explore the capabilities of NES.css and React. Not intended for commercial use. NES® and all the characters used in this project are registered trademarks of Nintendo®.

About

A simple web-app built to explore the capabilities of NES.css and React

Resources

Stars

Watchers

Forks