Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/chanmeng666/free-period-website

A modern web platform for sustainable menstrual care solutions, built with Next.js and React. Features multilingual support, location services, impact tracking, and educational resources.
https://github.com/chanmeng666/free-period-website

accessibility education framer-motion google-maps healthtech i18n impact-tracking localization menstrual-health nextjs react shadcn-ui sustainability tailwindcss typescript

Last synced: 22 days ago
JSON representation

A modern web platform for sustainable menstrual care solutions, built with Next.js and React. Features multilingual support, location services, impact tracking, and educational resources.

Awesome Lists containing this project

README 

        


 



FreePeriod











[![Next.js](https://img.shields.io/badge/Next.js-14-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)

[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)

[![React](https://img.shields.io/badge/React-18-blue?style=for-the-badge&logo=react)](https://reactjs.org/)

[![Tailwind](https://img.shields.io/badge/Tailwind-3-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com/)

[![License](https://img.shields.io/badge/license-MIT-green?style=for-the-badge)](LICENSE)



A modern web platform for sustainable menstrual care solutions, built with Next.js and React.






![screencapture-free-period-website-vercel-app-2024-12-08-18_14_26](https://github.com/user-attachments/assets/28795c2b-2256-4711-a511-02fb6f8b978a)



![屏幕截图 2024-12-06 113723](https://github.com/user-attachments/assets/8ff918ce-330c-401d-a493-639a2f82ad96)



![screencapture-free-period-website-vercel-app-impact-2024-12-08-18_15_18](https://github.com/user-attachments/assets/bf1ed8b2-7d6d-4a58-bb74-abac84be9b9f)



![screencapture-free-period-website-vercel-app-education-2024-12-08-18_15_38](https://github.com/user-attachments/assets/d6beb68a-3348-475e-a860-6f41978490f0)



## 🌟 Features



- 🌍 **Multilingual Support**: English and Chinese language options

- 🎨 **Modern UI/UX**: Responsive design with dark mode support using shadcn/ui

- 📍 **Location Services**: Interactive map integration for finding nearby stations

- 📊 **Impact Tracking**: Real-time sustainability metrics and visualization

- 📱 **Progressive Web App**: Mobile-first, responsive design

- 🔒 **Authentication**: Secure user authentication system

- 📚 **Educational Resources**: Comprehensive learning materials



## 🚀 Tech Stack



- **Framework:** Next.js 14 with App Router

- **Language:** TypeScript

- **Styling:** Tailwind CSS

- **Components:** shadcn/ui

- **Animations:** Framer Motion

- **State Management:** Zustand

- **Maps Integration:** Google Maps API

- **Localization:** Custom i18n implementation



## 🛠️ Installation



1. Clone the repository:

```bash

git clone https://github.com/ChanMeng666/free-period-website.git

```



2. Install dependencies:

```bash

npm install

```



3. Set up environment variables:

```bash

cp .env.example .env.local

```



4. Run the development server:

```bash

npm run dev

```



Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.



## 📖 Usage



The application consists of several key sections:



- **Products**: Showcase of sustainable menstrual care products

- **Locations**: Interactive map for finding nearby stations

- **Impact**: Visualization of environmental impact metrics

- **Education**: Resources and educational materials

- **Authentication**: User account management



## 🔑 Environment Variables



The following environment variables are required:



```env

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key

```



## 🤝 Contributing



Contributions are welcome! Please feel free to submit a Pull Request.



1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request



## 📝 License



This project is licensed under the [Apache-2.0 license](LICENSE) file for details.



## 🙏 Acknowledgments



- [Next.js](https://nextjs.org/)

- [shadcn/ui](https://ui.shadcn.com/)

- [Tailwind CSS](https://tailwindcss.com/)

- [Framer Motion](https://www.framer.com/motion/)



## 📫 Contact



**Chan Meng**



- LinkedIn: [chanmeng666](https://www.linkedin.com/in/chanmeng666/)

- GitHub: [ChanMeng666](https://github.com/ChanMeng666)