sarahosterhed / footprint-flip

A React app scaffolded with Vite

Footprint Flip 🃏

Code buddies

Sarah Östehed 👩🏻‍💻, Priya Pradhan 👩🏻‍💻 and Naima Malik 👩🏻‍💻

Technigo Final Project Week 11 - Nov 30th to Dec 12 2023

Through our game app we are trying to educate consumer about their action and what impact they have on the environment in a fun way. Through education and awareness, we aspire to inspire a sustainable shift in consumer behavior, fostering a greener and more responsible future.

The game presents several impressive features, ensuring an engaging user experience.

Key Features 🙌

1. Interactive Drag-and-Drop:

Users can click and drag cards onto the board. Cards automatically sort in ascending order based on emissions, promoting a dynamic game play experience.

2. Score System:

Dropping cards in the correct position earns users a +1 score. Incorrect placements prompt visual feedback, guiding users to the right spot. Responsive Design:

The game is designed to be seamlessly responsive across all devices, ensuring accessibility for a wide audience.

3. Multilingual Support:

Users can enjoy the game in both English and Swedish, catering to diverse language preferences.

4. Animations and Visual Delight:

Score flags feature captivating animations, enhancing the overall visual appeal. A celebratory React-confetti effect at the end adds a delightful touch to the gaming experience.

Stretch Goals Achieved: Multilingual Support, Animation and React Confetti Effect.

Getting Started with the Project

Dependency Installation & Startup Development Server Once cloned, navigate to the project's root directory and this project uses npm (Node Package Manager) to manage its dependencies.

The command below is a combination of installing dependencies, opening up the project on VS Code and it will run a development server on your terminal.

npm i && code . && npm run dev

Problem-Solving Approach 😈

1. Research and Learning:

Utilized various learning resources such as company blogs, videos, and educational websites like W3Schools. Demonstrated flexibility by considering different approaches, shifting from the initially planned dnd-kit to the HTML Drag and Drop API.

2. Collaboration and Communication:

Fostered effective teamwork by actively discussing ideas within the team. Engaged with the Technigo community on platforms like Stack Overflow and utilized ChatGPT for troubleshooting and clarification.

Tech Stack 💻

Frontend: React.js, Redux, React-router, React-i18next.

UI/UX: HTML Drag and Drop API, React-lottie for animations, React-confetti for the celebratory effect.

Project Planning 📝

• Used Trello for project management, starting with basic requirements and progressing to intermediate and advanced goals.
• Facilitated communication through Slack and Discord.
• Leveraged external resources such as Stack Overflow and ChatGPT for guidance.

View it Live 🎉

https://footprint-flip.netlify.app