Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chingu-voyages/v48-tier2-team-10
Travel back in time and enter the world of dinosaurs with DinoSoul | Voyage-48 | https://chingu.io/ | Twitter: https://twitter.com/ChinguCollabs
https://github.com/chingu-voyages/v48-tier2-team-10
axios figma javascript nivo-charts react-leaflet react-paginate react-router reactjs
Last synced: about 1 month ago
JSON representation
Travel back in time and enter the world of dinosaurs with DinoSoul | Voyage-48 | https://chingu.io/ | Twitter: https://twitter.com/ChinguCollabs
- Host: GitHub
- URL: https://github.com/chingu-voyages/v48-tier2-team-10
- Owner: chingu-voyages
- Created: 2024-03-02T16:53:25.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-04-12T07:45:50.000Z (10 months ago)
- Last Synced: 2024-11-14T06:42:19.576Z (3 months ago)
- Topics: axios, figma, javascript, nivo-charts, react-leaflet, react-paginate, react-router, reactjs
- Language: JavaScript
- Homepage: https://dinosoul-tier2-team10.netlify.app/
- Size: 2.32 MB
- Stars: 0
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
DinoSoul
Welcome to DinoSoul, where you can time travel and discover the world of dinosaurs. This README provides an overview of the app's functionality, features, and the technologies used to bring it to life.
VIEW TABLE OF CONTENTS
- About the Project
- Technologies Used
- Developers
- Designer
- Project Link
- Project Style
- Usage
- Pages
- Acknowledgments
I. About the Project
DinoSoul is a dynamic and user-friendly web application that's been developed as part of our project during our journey in Chingu Tier 2: Frontend Framework & API Usage. This project showcases our collective efforts, learning, and commitment to building a feature-rich application.
## Key Features:
### Landing Page
- **Dinosaurs of the Day Component**: A scrolling carousel randomly chooses dinosaurs of the day. Users can click a card and be taken to their selected dinosaur’s details page.
- **Charts**: Two charts (pie chart and doughnut chart) illustrate the distribution of general dinosaur diets and type of dinosaurs.
- **Location Map**: An interactive map allows the user to click on a pin which opens a drawer showing dinosaurs in that country. Users can click a card and be taken to their selected dinosaur’s details page.
### Search Page
- The app offers access to over 300 dinosaurs.
- Results are paginated, ensuring a user-friendly experience.
- **Search Component**: A search feature allowing users to search for dinosaurs by name.
- **Filter**: Users can dynamically filter their search results by diet, country, weight, and length.
- **Sort**: Users can sort their search results alphabetically, weight, and length.
- **Dinosaur Display**: Dinosaur cards display dinosaurs' name, weight, length, country, diet and corresponding images .
### Dinosaur Details Page
- Each dinosaur has its own dynamically generated page, enabling users to view full details of their selected dinosaur.
- Details include name, image, type of dinosaur, length, diet, when it lived, type of species, description, taxonomy, and named by.
- **Dinosaur Location Map**: The location of the selected dinosaur is displayed on a map
### Mobile Responsiveness
- The app is designed to work seamlessly on mobile devices, providing users with the flexibility to access it from any location.
II. Languages and Tools Used
- **React.js**: React is used for building the user interface, making it dynamic and interactive.
- **JavaScript**: JavaScript is the primary programming language for building the app's functionality.
- **React Router**: React Router is used for routing and navigation.
- **Nivo**: Nivo is used for creating rich and interactive chart components.
- **React Leaflet**: React Leaflet and Leaflet is used for creating interactive map components.
- **React Paginate**: React Paginate is used to create pagination for large datasets.
- **Axios**: Axios is used for making HTTP requests to fetch dinosaur data from external sources.
- **Figma**: Figma is used for designing and prototyping the user interface, contributing to a visually pleasing user experience.
III. Developers
IV. Designer
V. Project Link
https://dinosoul-tier2-team10.netlify.app/
VI. Project Style
Color Scheme
Logo
Favicon
Typography
**Patua One**
**Inter**
VII. Usage
_Below is an example of how you can install and setup the application on your device._
To set up and run the DinoSoul App locally, follow these steps:
1. Clone this repository to your local machine:
```
[git clone https://github.com/chingu-voyages/v48-tier2-team-10.git]
```
2. Change the directory to the project folder:
```
cd v48-tier2-team-10
```
3. Install the project dependencies:
```
npm install
```
4. Start the development server:
```
npm run dev
```
5. Open your web browser and visit `http://localhost:5173` to access DinoSoul.
Travel back in time and enter the world of dinosaurs!
If you encounter any issues or have suggestions for improvements, please don't hesitate to create a GitHub issue or reach out to us.
VIII. Pages
- Homepage
- Search Page
- Dinosaur Details Page
IX. Acknowledgments
Credit to 
for README template
