TBT Education App

Description

The TBT Education App is a React-based application designed to provide an enriching learning experience for children aged 7-14 participating in an empowerment course. The app offers interactive features, including a "Fun Facts" Black History API generator, a weekly quiz, a YouTube "Did You Know" video page, and an API affiliate link guiding young learners to a dedicated Amazon book page titled "Righteous Reading."

Motivation

The motivation behind the TBT Education App is to engage and empower children within the specified age range, fostering a positive educational experience aligned with their empowerment course. The app aims to make learning enjoyable and impactful through carefully curated content and interactive features.

Problem Solved

The TBT Education App addresses the need for an educational platform that combines interactive elements, informative content, and a user-friendly interface to enhance the learning journey for young minds interested in Black History education.

What I Learned

Throughout the development of this project, the team gained valuable experience in utilizing ReactJS, integrating external APIs, deploying applications with Netlify, and implementing various libraries and technologies. The project emphasized good coding standards, front-end/UI design, and collaboration within a development team.

Table of Contents

• Installation
• Usage
• Live Site
• Credits
• Team
• Third-Party Assets
• Libraries, Packages, and Technologies
• Badges
• Conclusion

Installation

To run the TBT Education App locally, follow these steps:

1. Clone the repository to your local machine.
2. Navigate to the project directory.
3. Run npm install to install project dependencies.
4. Run npm run dev to start the development server.
5. Open your browser and visit http://localhost:3000 to view the app.

Usage

The TBT Education App provides a seamless user experience with the following main features:

Home Page

The home page introduces TBT education, guiding students and parents to learning resources and fun tools.

Fun Facts Page

Learn interesting facts about Black History with dynamic content loaded from the Black History Facts API.

TBT Quiz Page

Reinforce in-class learning with a weekly quiz, featuring a user-friendly interface for quiz results.

Did You Know TV Video Page

Stay updated with the latest YouTube videos related to Black History through dynamic embedding.

Righteous Reading Page

Discover recommended Amazon books related to Black History with the integration of the Amazon Product Advertising API.

About Us Page

Get to know the app's purpose, the importance of Black History education, and meet the development team.

Live Site

Visit the live site here.

Credits

Team

• Simon Mckenzie
• Claire Fraser
• Annam Khalid
• Jem Lawton

Third-Party Assets

• Black History Facts API
• Google Sheets API
• YouTube API
• Google Books

Libraries, Packages, and Technologies

• Axios
• Tailwind
• Netlify (Frontend deployment)
• MongoDB
• Express (Config in process)
• React
• Nodejs
• AWS EC2 (Backend server deployment):
• NGINX
• PM2
• Papaparse
• Ubuntu Server
• Framer Motion
• Kitwind (UI Tailwind Kits)

Research References

• React - Developer Learning Website
• Tailwind - Documentation
• Kitwind - Components
• Atlassian - Git Workflows Guide
• IBM - Create SSL With OpenSSL
• Medium - Using Google Sheets As A CMS
• Flaticon - Custom Icons
• Dev.to - Setup and Deploy A MERN Stack
• npm Docs - CLI Commands
• Amazon EC2 - User Guide

Badges

Conclusion

🏆 The TBT Education App aspires to bring an immersive and educational journey to young learners, contributing to the promotion of Black History education in an engaging and empowering manner.