A sleek and modern web application built with React and Supabase to rank cryptocurrencies based on user-submitted 24-hour trading volumes.
Tech Stack
react-supabase-crypto is a simple yet powerful application that allows users to submit cryptocurrency names and their 24-hour trading volumes. The data is stored in a Supabase database and displayed in a clean, responsive UI.
- React – For building a dynamic and responsive user interface.
- TypeScript – For type-safe and maintainable code.
- Supabase – For real-time database management.
- Tailwind CSS – For utility-first styling.
- Vite – For a fast development and build experience.
- ✅ Crypto Submission Form: Input a cryptocurrency name and 24-hour volume.
- 🔐 Supabase Integration: Secure database storage and retrieval from
crypto_ranking. - ⚡ Live State Management: React hooks (
useState,useEffect) for dynamic updates.
git clone https://github.com/Girma35/react-supabase-crypto.git
cd react-supabase-cryptonpm installCreate a .env file in the root directory and add:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_keynpm run devThen open http://localhost:5173 in your browser.
- Access the app at http://localhost:5173.
- Enter the cryptocurrency name (e.g., Bitcoin).
- Input the 24-hour trading volume (e.g., 25000000).
- Click the "Submit" button.
- See your coin ranked based on volume in real-time.
react-supabase-crypto/
├── public/ # Static assets
├── src/ # Source code
│ ├── components/ # Reusable React components
│ ├── lib/ # Supabase client setup
│ ├── styles/ # Tailwind CSS and global styles
│ ├── App.tsx # Main app component
│ └── main.tsx # Entry point
├── .env # Environment variables
├── package.json # Project dependencies
├── tsconfig.json # TypeScript configuration
└── README.md # Project documentation
📷 Form for submitting cryptocurrency data
📷 Table displaying submitted cryptocurrency rankings
(Add actual screenshot images using markdown image syntax if available)
Contributions are welcome! Here's how to get started:
# 1. Fork the repository
# 2. Create a feature branch
git checkout -b feature/your-feature
# 3. Make changes and commit
git commit -m "Add your feature"
# 4. Push the branch
git push origin feature/your-feature
# 5. Open a Pull RequestPlease follow coding standards and add tests where applicable.
This project is licensed under the MIT License. See the LICENSE file for more info.
- GitHub: @Girma35