Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pushpendra-1697/swapi

This project is a responsive web app showcasing Star Wars planets and their residents, utilizing SWAPI for data retrieval and emphasizing clean design and intuitive navigation. It's built to offer a visually engaging experience while providing seamless access to detailed planetary information.
https://github.com/pushpendra-1697/swapi

api-integration asynchronous-javascript error-handling fetch-api html-css-javascript loading mapping pagination problem-solving react-components react-hooks react-library reactjs responsiveness reusable-components swapi

Last synced: about 2 months ago
JSON representation

This project is a responsive web app showcasing Star Wars planets and their residents, utilizing SWAPI for data retrieval and emphasizing clean design and intuitive navigation. It's built to offer a visually engaging experience while providing seamless access to detailed planetary information.

Awesome Lists containing this project

README

        

# swapi
## Overview
This project involves building a responsive web application that serves as a directory of planets from the Star Wars universe. Utilizing the Star Wars API (SWAPI), it fetches data about planets and their notable residents, presenting them in an intuitive card-based interface. The application features pagination for easy navigation through the list of planets and focuses on delivering a visually appealing user experience through modern styling techniques and responsive design.

## Verecel Hosted Link :
```bash
https://swapi-teal.vercel.app/
```

## How to run locally

Clone the Repository from GitHub. Then do the following steps:

- On Windows

```bash
npm install
```

```bash
npm run start
(or)
npm start
```

## Tech Stacks :

React (JSX Syntax), Fetch for handling asynchronous requests, Standard React components, and React hooks.

## PORT Used :

```bash
3000 ----> Default Port
```
## Some Project Screenshots :
### A) For Computer Screen:
![Screenshot (521)](https://github.com/Pushpendra-1697/swapi/assets/104748364/f82d8d7c-0a90-4ca7-a799-4e6d9c97bf0c)
![Screenshot (522)](https://github.com/Pushpendra-1697/swapi/assets/104748364/17346b6d-e869-4748-b109-1c8dd9dcc2e8)
![Screenshot (528)](https://github.com/Pushpendra-1697/swapi/assets/104748364/1078665e-7607-4ffe-8283-2796759e1aee)

#### B) For Mobile/Tablet Screen :
![Screenshot (524)](https://github.com/Pushpendra-1697/swapi/assets/104748364/5435036c-b54e-46bc-a517-b90f5d416065)
![Screenshot (525)](https://github.com/Pushpendra-1697/swapi/assets/104748364/a51ed5b0-4912-43a4-a770-e30499a56dc3)
![Screenshot (526)](https://github.com/Pushpendra-1697/swapi/assets/104748364/1d6235ac-e8b3-451b-a782-8344b535a0f4)
![Screenshot (527)](https://github.com/Pushpendra-1697/swapi/assets/104748364/964da353-6570-4f77-a5a1-c2f63bae5272)