https://github.com/dominicpam89/showcase-02-billionare-wannabe
Who wants to be a billionare? This is an app to track financial instruments! Oh i'm so bold like i'm above senior developer am I?! HUH!
https://github.com/dominicpam89/showcase-02-billionare-wannabe
coingecko coingecko-api firebase firebase-auth jest react react-hook-form react-vite recharts tailwindcss tanstack-react-query testing-library-react typescript vitest zod
Last synced: 7 months ago
JSON representation
Who wants to be a billionare? This is an app to track financial instruments! Oh i'm so bold like i'm above senior developer am I?! HUH!
- Host: GitHub
- URL: https://github.com/dominicpam89/showcase-02-billionare-wannabe
- Owner: dominicpam89
- Created: 2024-08-23T12:20:06.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-29T17:24:41.000Z (about 1 year ago)
- Last Synced: 2025-02-05T22:38:44.038Z (9 months ago)
- Topics: coingecko, coingecko-api, firebase, firebase-auth, jest, react, react-hook-form, react-vite, recharts, tailwindcss, tanstack-react-query, testing-library-react, typescript, vitest, zod
- Language: TypeScript
- Homepage: https://billionare-wannabe.netlify.app/
- Size: 1.19 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BILLIONARE WANNABE APP
**Author**: dominicpam89
> (ofcourse, who else, this is my github repository, duh 🌝)
**Project Description**:
Billionaire Wannabe is a React Vite project that displays trending cryptocurrencies and NFTs. The app fetches data from the CoinGecko API for trending coins and displays it with a graph using the Recharts library. Trending NFTs are also displayed, but without a graph, as the data is not provided by the API. Mainly the goals why i build this prjoject:
- It's fun!
- Showcasing my skills (since i build this only in 4 days, duh!)
- Frontend showcase
- A little backend showcase (don't worry your grace, i will showcasing on different hundred projects of mine 👾👾👾!)
## FEATURES
- **Trending Coins**: Display trending cryptocurrencies with a graph showing market trends.
- **Trending NFTs**: Display trending NFTs without a graph.
- **User Authentication**: Implemented using Firebase for user sign-in, registration, and profile management.
- **Responsive Design**: Fully responsive, mobile-first design.
- **State Management**: Handled through a custom global context using React's context API.
## INSTALLATION
### Prerequisites
- Nodejs v16 or higher
- npm or yarn
### Clone the Repository
`git clone https://github.com/dominicpam89/billionare-wannabe.git
cd billionaire-wannabe`
### Install Dependencies
`npm install`
## USAGES
### Development Server
To run the development server:
`npm run dev`
The app will be available at http://localhost:5173
(duh)
### Build for Production
To build the app for production:
`npm run build`
## AVAILABLE SCRIPTS
- **npm run dev** | Starts the development server
- **npm run build** | Builds the app for production
- **npm run lint** | Lints the project files
- **npm run preview** | Previews the production build
- **npm run test** | Runs the tests using Vitest
## API INTEGRATIONS
You need to establish your own firebase environments, and coingecko API,
in the environment variables.
## PROJECT STRUCTURE
The project follows a modular structure:
src/
│
├── components/ # Reusable UI components
├── lib/
│ ├── context/ # React Context
│ ├── definition/ # TypeScript type definitions
│ └── hooks/ # Custom hooks
│ └── services/ # API service classes (e.g., Auth, CoinGecko)
└── App.tsx # Main application component
It's not covering all folders and files, but i guess it's self explanatory
## CONTRIBUTING
Contributions are welcome! Please fork the repository and submit a pull request.