Discover all the super heroes & villains from comics world. The web-based application is built using NextJS, ReactJS, TailwindCSS & RapiAPI. It has a simple work-flow without much being added any complexity. The objective was to better understand concepts of NextJS.
This project has utilized some of the important features of NextJS & ReactJS
- Routing
- Static & Dynamic rendering (Can be differentiate by running 'npm run build'
- Server Actions (Data Fetaching)
- Few custom configuration in next.config.js
- Image optimization
- Custom font integration
- TailwindCSS & minor custom configuration
- Responsive behavior
- Site metadata
![Screenshot 2023-12-17 at 4 29 18 PM](https://private-user-images.githubusercontent.com/17022643/291057615-46b9575e-136f-4006-a1b2-279f27de1faf.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxOTA1MzYsIm5iZiI6MTczOTE5MDIzNiwicGF0aCI6Ii8xNzAyMjY0My8yOTEwNTc2MTUtNDZiOTU3NWUtMTM2Zi00MDA2LWExYjItMjc5ZjI3ZGUxZmFmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEwVDEyMjM1NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTMzNTA4NWYzYjIxNGNmZDUxYTkwNGJkMjJlNjgxMmQ5ZWFkZDE2MDk5NzEwZjJkMGRhYTA0OTZjY2MzNmQ5NDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.0LsFNiVZm6XHHKDwV6rHFzDcMf7jPDzQYFViolxmo6E)
![Screenshot 2023-12-17 at 4 30 21 PM](https://private-user-images.githubusercontent.com/17022643/291057619-895aec6e-408e-4f1f-b501-ae8ea1d3063a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxOTA1MzYsIm5iZiI6MTczOTE5MDIzNiwicGF0aCI6Ii8xNzAyMjY0My8yOTEwNTc2MTktODk1YWVjNmUtNDA4ZS00ZjFmLWI1MDEtYWU4ZWExZDMwNjNhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEwVDEyMjM1NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY4YWE2ZTI3MjUzMTNiODU1MTg2ZjA2NWIzNTFiNjFkYmJkMDkzNzgxMTE2NjkyMTY1MzkzYmZlYmMzNjVhODAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.5MwsQhAgqjLz8CFKyvnMxUrGA4-BVt7MOFkPbwCb_WY)
Steps to run :
- npm install
- npm run dev
- localhost:3000
Note : It requires RapidAPI key to fetch data. Please utilize your's key to pull data.
https:sjshank.me