EcoTrack is a community-driven platform designed for eco-conscious individuals to explore sustainability challenges, share practical eco-tips, participate in local green events, and track their personal environmental impact. The platform emphasizes measurable progress, collaboration, and awareness-building within the sustainability community.
EcoTrack provides a seamless experience for users interested in sustainable living:
- Discover and join environmental challenges.
- Share and upvote practical eco-friendly tips.
- Browse and participate in local green events.
- Track your activities and measure personal eco-impact.
- Engage with other like-minded community members.
The platform is designed to foster both personal growth and collective impact, helping users make eco-friendly choices a part of their everyday lives.
The main goals of EcoTrack are:
- Encourage sustainable lifestyle choices through interactive challenges.
- Provide a hub for eco-conscious individuals to share tips and resources.
- Offer measurable insights into personal and community environmental progress.
- Build a supportive community focused on actionable change.
- Filter and view all challenges.
- Detailed view of each challenge.
- Join challenges and track progress.
- Edit and delete challenges.
- Add new challenges.
- Upvote EcoTips and share knowledge.
- Skeleton animation for loading states.
- Toast notifications for actions.
- Popup confirm box for sensitive actions.
- View joined participants.
- Track personal activities (My Activities).
- User authentication: Login and Register.
- Responsive and interactive UI.
- React:
^19.1.1 - React DOM:
^19.1.1 - React Router:
^7.9.5 - Axios:
^1.13.2 - Firebase:
^12.5.0 - TailwindCSS:
^4.1.17 - @tailwindcss/vite:
^4.1.17 - React Icons:
^5.5.0 - Lucide React:
^0.553.0 - React Loading Skeleton:
^3.5.0 - Framer Motion:
^12.23.24 - Swiper:
^12.0.3 - SweetAlert2:
^11.26.3 - React Toastify:
^11.0.5
Home.jsx— Main landing page with challenges overview.AddChallenges.jsx— Page to add a new challenge.Challenges.jsx— List of all challenges.ViewChallenge.jsx— Detailed view of a single challenge.EditChallenge.jsx— Edit challenge information.EcoTips.jsx— Share and upvote eco-tips.Events.jsx— Browse local green events.MyActivities.jsx— Track user activities.Login.jsx— User login page.Register.jsx— User registration page.ForgotPassword.jsx— Password recovery page.Error404.jsx— Page not found.Loading.jsx— Skeleton loader page.
- Clone the repository:
git clone [https://github.com/AyanSujon/ecotrack-client-side.git](https://github.com/AyanSujon/ecotrack-client-side.git)
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.