https://github.com/jezebel1990/next-cartoon-network

This is a Next.js-powered Fullstack app focused on providing an engaging experience by displaying information about iconic Cartoon Network characters.
https://github.com/jezebel1990/next-cartoon-network

cartoon-network framer-motion javascript nextjs tailwindcss

Last synced: 20 days ago
JSON representation

This is a Next.js-powered Fullstack app focused on providing an engaging experience by displaying information about iconic Cartoon Network characters.

• Host: GitHub
• URL: https://github.com/jezebel1990/next-cartoon-network
• Owner: Jezebel1990
• Created: 2024-10-26T04:01:22.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-29T23:23:15.000Z (3 months ago)
• Last Synced: 2024-11-16T17:23:59.023Z (3 months ago)
• Topics: cartoon-network, framer-motion, javascript, nextjs, tailwindcss
• Language: JavaScript
• Homepage: https://next-cartoon-network.vercel.app
• Size: 3.4 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Next - Cartoon Network

![cartoon](https://github.com/user-attachments/assets/5e59240b-2216-42e8-b53d-455280a556fd)








    Project based on FreeCodeCamp tutorial »

    


    


  


[![freeCodeCamp](https://img.shields.io/badge/-freeCodeCamp-brightgreen?logo=freeCodeCamp)](https://www.freecodecamp.org/)

[![React](https://img.shields.io/badge/-React-blue?logo=React)](https://reactjs.org/)

[![React Hook Form](https://img.shields.io/badge/-Next.js-6E36F6?logo=Next.js&logoColor=white&color=black)](https://react-hook-form.com/)

[![Tailwind CSS](https://img.shields.io/badge/-Tailwind%20CSS-06B6D4?logo=Tailwind%20CSS&logoColor=black&color=white)](https://tailwindcss.com/)

[![JavaScript](https://img.shields.io/badge/-JavaScript-FFA500?logo=JavaScript&logoColor=white&color=FFA500)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

[![Framer Motion](https://img.shields.io/badge/-Framer%20Motion-blue?logo=Framer)](https://www.framer.com/api/motion/)



## Introduction

This is a Next.js-powered Fullstack app focused on providing an engaging experience by displaying information about iconic Cartoon Network characters. In addition, the project offers a quiz section where users can test their knowledge of the program, providing fun and educational interactivity.

## Features

- **Character Display:** View detailed information of Cartoon Network characters.

- **Interactive Quiz:** Test your knowledge of the shows and characters.

- **Intuitive interface:** Fluid and responsive navigation, built with a focus on user experience.

- **Local JSON as a data source:** Quiz character and question data is loaded directly from JSON files, simplifying the flow of data into the app.

## Installation and Use

1. Clone the repository to your local machine.

```bash

git clone https://github.com/Jezebel1990/next-cartoon-network.git

cd next-cartoon-network

```

2. Open the cloned folder in your preferred code editor, install the required

   dependencies :

```bash

npm install

```

3. Start the development server by running the following command:

```bash

npm run dev

```