Roots is an online language learning platform that provides high-quality courses in Igbo language. The platform will offer video lessons, interactive exercises and community features to aid learners of all levels improve their language skills.
We would love for you to try out our website and experience its full potential. Feel free to explore the different pages, provide feedback, and share your thoughts with us. We are always looking to improve and enhance our website to better serve our users.
To access our website, click here: ROOTS.
- Roots (Landing page)
- Features of Roots
- Screenshots
- Technologies used
- Setting up the repository
- Setting Up Firebase
- Testing
- Deployment
- Links
- Contributors
Roots will offer online courses in Igbo language. The courses will include written lessons, audio recordings, and video lessons. The lessons will cover topics such as basic vocabulary, grammar, and pronunciation. The courses will be self-paced, allowing learners to study at their own pace.
The platform will include interactive exercises, such as quizzes and fill-in-the-blank exercises, that allow learners to practice what they've learned. These exercises will provide immediate feedback, helping learners to identify areas where they need to improve.
The platformm will offer comunity features such as forums and social media groups, where learners can connect with each other and with native speakers of the language. This will allow learners to practice their language skills and to ask questions about the language and culture. The community features will be moderated to ensure a safe and respectful environment for all users. These features will allow learners to connect with other language learners and practice their language skills in a supportive environment.
The ROOTS chatbot will built using Tiledesk, a powerful chatbot platform that enables developers to easily create, test, and deploy chatbots for various use cases. It will be a language learning assistant named Alex. It will provide personalized and interactive language learning experiences by engaging users in natural conversations in English language and will feature a variety of interactive learning tools like games and quizzes to make language learning fun and engaging.
Here are some screenshots of the Roots online language learning platform:
The Screenshots section provides screenshots of various pages in the project. These examples would help potential users get a better understanding of what the project looks like and how it works.
| Technology | Version |
|---|---|
| React | v17.0.2 |
| Firebase | v9.0.0 |
| React Router | v5.2.1 |
| React Icons | v4.8.0 |
In this project, we used React v17.0.2 as the main front-end library to build the user interface. We also used React Router v5.2.1 to handle client-side routing and navigation.
Firebase v9.0.0 was used as the backend and database provider. We leveraged Firebase Authentication, Cloud Firestore, and Cloud Functions to handle user authentication, data storage, and serverless functions.
To style the components, we used React Icons v.4.8.0, a popular React UI framework that provides pre-built components and styles. Additionally, we used React Hooks to manage component state and perform side-effects, such as API calls and form submissions.
To set up the repository, follow these steps:
- The React App was created with
create-react-app
- Create a React App using
npx create-react-app Roots
- Change directory to the ROOTS folder using
cd Roots
- Start the React App Development Server by running
npm start
-
Open
http://localhost:3000to view the app in the browser. -
To deploy the React App after project build, run
npm run build
To set up Firebase, follow these steps:
-
Go to
firebase.google.com -
Click on
Get startedand create a firebase project. -
Create a firebase project and enter a project name.
-
Enable google analytics for your firebase project, click continue, and choose the default firebase account for google analytics configuration.
-
Click on
create project. -
On the Firebase console, click on the web icon to get started.
-
Register the app: Add the web app name and click on the option that allows Firebase hosting for the app.
-
Add
Firebase SDK -
In the terminal, run
npm install firebaseto add Firebase to the React project. -
On VsCode, create a Firebase folder in the src file and create a
firebase-config.jsfile in the folder. -
Copy and paste the code snippet on the Firebase console to connect Firebase to the project.
-
Install Firebase CLI, and run
npm install -g firebase-tools. -
Deploy to Firebase hosting.
-
Go to the main Firebase console, click on build, then authentication, and click on get started.
-
Get started with Firebase auth by adding your first sign-in method.
-
Click on the preffered sign-in method and enable it.
-
Import the Firebase auth method to the
firebase-config.jsfile and export it on the form file on the React app.
Roots includes automated tests to ensure that the app is functioning correctly. These tests cover both the React components and the Firebase functionality.
These test individual React components to ensure that they render correctly and behave as expected.
These test the interaction between React components and Firebase, to ensure that data is being stored and retrieved correctly.
These test the app as a whole, to ensure that it functions correctly from the user's perspective.
To run the tests locally, follow these steps:
- Clone the repository
- Install dependencies by running
npm install - Run
npm testto start the test suite
The tests are run using Jest, a popular testing framework for React apps.
Roots uses continuous integration to automatically run tests whenever code is pushed to the repository. We use GitHub Actions for this. Whenever a pull request is opened, GitHub Actions will run the test suite to ensure that the changes do not introduce any new bugs or issues.
The Roots landing page has been deployed on Vercel, and it can be accessed at the following URL: https://roots-landing-page.vercel.app/.
To deploy the app on Vercel, follow these steps:
-
Create an account on Vercel (if you don't have one already).
-
Connect the GitHub repository to your Vercel account.
-
Configure the deployment settings, including the branch to deploy, build commands, and environment variables.
-
Set up automatic deployments for our chosen branch so that the app would be updated whenever we pushed changes to the repository.
-
We also configured some environment variables in the Vercel project settings, including the Firebase configuration variables.
Overall, the deployment process was straightforward and seamless. We appreciate Vercel's user-friendly interface and powerful features that made it easy to deploy and manage our app.
- Ifechukwu Max-Oti
- Leila Yesufu
- Adetutu Deborah Oluwasanmi
- Adesina Mariam