Case Study - Beacon Of Change
Beacon of Change is an app that aims to create awareness and educate people about the impact of climate change. This app offers a climate change specific news bulletin, sustainability tips to conserve energy, water, make eco-friendly fashion and transport choices as well as effectively manage waste.
- Industry
- Computer Software
- Year
- Service
- Generative AI
Overview
Beacon Of Change is a Next.js application that leverages the Google's Gemini AI API to create awareness and educate people about the impact of climate change. This app offers a range of features including a climate change-specific news bulletin, sustainability tips, information on sustainability campaigns, sustainable B2C businesses, and a blog dedicated to the critical impact of climate change.
This web application is my entry to Google's Gemini API Developer Competition.
Implementation
The core of the Beacon Of Change app is developed using Next.js, a popular React framework, which allows for server-side rendering and static site generation. This ensures that the application is highly performant and scalable. The project setup involves running a development server using commands like npm run dev, which facilitates local testing and iteration during the development phase. The use of Next.js also allows for easy deployment on platforms like Vercel, providing a straightforward path to bring the application live.
TypeScript is employed throughout the project to enhance code quality and maintainability. By using TypeScript, the developers ensure that the codebase is robust, with early detection of potential errors through static typing. Styling is handled using Tailwind CSS, a utility-first CSS framework that allows for rapid and flexible design implementations. Tailwind CSS is configured through the tailwind.config.ts file, enabling customized design tokens and theme settings that ensure a cohesive visual appearance.
Features -
- Climate Change News Bulletin: Stay updated with the latest news on climate change.
- Sustainability Tips: Learn how to conserve energy and water, make eco-friendly food, fashion and transportation choices, as well as effectively manage home/individual waste generation.
- Sustainability Campaigns: Discover sustainability campaigns near you based on your location.
- Sustainable Businesses: Find and support sustainable businesses in your area.
- Climate Change Blog: Read blog posts related to the critical impact that climate change has on our planet.
Technologies
HTML5
CSS3
JavaScript
TypeScript
NextJS
TailwindCSS
Git Cli
Github
Vercel
