CodeClan - Week 9 - Group Project - App created using React, MongoDB and multiple APIs

Related tags

education_station
Overview

Education Station

Synopsis

This app was completed by Cohort E49 for CodeClan's Professional Software Development course. The brief was to create an educational app using technologies taught in the previous weeks - React, Javascript and MongoDB. In addition, we researched and used other librarires/tools to provide the functionality we designed (e.g. React Router, React DnD, Heroku for hosting). It was completed in a one week sprint by a team of six.

A list of words on a specific topic is defined in the database, and APIs are then polled to fetch a definition, image and audio pronounciation for the word - this information is then used to create three simple games aimed at primary school aged students.

  • Spelling game - identify the item in the image and spell it
  • Audio game - listen to the word being pronounced and spell it
  • Drag and drop game - drag the word onto the correct definition

APIs used:

Usage

  • Ensure NPM is installed on your local machine
  • Request an API key from http://owlbot.info
  • Clone the repository and open it in terminal
  • Change to the server directory and run npm install to install all pre-requisites (listed in package.json)
  • Run npm run seeds to load seed data into MongoDB
  • Run npm run server:dev to start the server
  • Verify it is working by browsing to http://localhost:5000/api/topics or http://localhost:5000/api/accounts and verifying data appears
  • Open a new terminal window, then change to the client directory
  • Run npm install to install all pre-requisites (this may take a few minutes to complete)
  • In the client/services folder, rename auth.js.template to auth.js and insert your owlbot API key (inside the array and inside quotation marks)
  • Run npm start to start the client application
  • Verify it is running correctly by browsing to http://localhost:3000
Issues
  • Feature/add your own topic

    Feature/add your own topic

    Allows a parent to add a custom topic

    opened by saraHumphries 1
  • Feature/feedback on audio game

    Feature/feedback on audio game

    Adds feedback on right and wrong answers as you play the game. Still need to think about the number of tries you get

    opened by saraHumphries 1
  • Fix/seed data streamline

    Fix/seed data streamline

    Changed the seed data so it now has an audio, image and description. Also added in more auth tokens and a randomiser to help with api calls please review :)

    opened by zyusaf 1
  • Fixed randomise bug go now correct letter order won't show up

    Fixed randomise bug go now correct letter order won't show up

    still has an issue with time delay/re-render speed

    opened by zyusaf 1
  • Feature/css tweaks

    Feature/css tweaks

    opened by OhmniD 1
  • Feature/react router

    Feature/react router

    Installed react router by running npm install react-router-dom, it is now a dependency in package.json

    Imported BrowserRouter, Switch and Route from react-router-dom in app.js Imported Link from react-router-dom in any components that has a requirement to navigate to another page

    Created subfolders in components for parent and student dashboards - all sub components to be created in here.

    Visually tested that switching between home, parent and student works as expected.

    opened by OhmniD 1
  • Feature/further css

    Feature/further css

    Various CSS changes to make the page a little nicer to look at - all subject to review and change.

    opened by OhmniD 1
  • Feature/show account deatils on p dashboard

    Feature/show account deatils on p dashboard

    Displaying dummy data for now. TESTING: Go to /parent to see account details on page

    opened by saraHumphries 1
  • Feature/server setup

    Feature/server setup

    Seeds, router and server setup. All tests pass on Insomnia. Please merge with develop.

    opened by ttinning 1
  • Feature/answer input

    Feature/answer input

    Added a component to compare given answer with a hard-coded example word. We added it to the app for testing purposes but now removed.

    opened by Gazza11 0
Owner
Tristan Tinning
Student at @CodeClan Edinburgh. Changing my career after ten years in hospitality sales to focus on a passion.
Tristan Tinning
CodeClan - Week 9 - Group Project - App created using React, MongoDB and multiple APIs

Education Station Synopsis This app was completed by Cohort E49 for CodeClan's Professional Software Development course. The brief was to create an ed

Tristan Tinning 6 Jul 14, 2021
Node.js and mongoDB Google Drive Clone

MyDrive MyDrive is an Open Source cloud file storage server (Similar To Google Drive). Host myDrive on your own server or trusted platform and then ac

null 2.5k Sep 23, 2021
This project is a simplified a full stack clone of Stackoverflow.

Stackoverflow Clone Live: http://clone-of-stackoverflow.vercel.app/ This project is a simplified a full stack clone of Stackoverflow. I wrote it to le

Salih Özdemir 487 Sep 24, 2021
An instagram clone created with the MERN stack

Instaclone An instagram clone created with MongoDB, Express, React, and Socket.io Have a look at the live demo Tech Frontend: React State management:

Sander Moen 420 Sep 21, 2021
A simplified Trello clone built with React, Redux, Node, Express and MongoDB.

Trellis A Trello Clone - Built with React, Redux, Express, and MongoDB. ?? : I'm looking for maintainers, feel free to reach out to me on [email protected]

Ayush Aggarwal 83 Sep 10, 2021
Learn React by Building Netflix.

It means that you are learning React.js by building a real-life project. I will explain concepts in detail. This post is the first part in my series and it is suitable for beginners.

Hiep Le 148 Sep 23, 2021
Api server for Tclone, a concise, fast, and feature rich Twitter clone built with MERN stack.

Api server for tclone Try the app here React frontend repo here This project is my own take on building Twitter clone, I have tried to keep things sim

muzamil 45 Sep 4, 2021
Chat app created by React.js

Chat app created by React.js

Alper Efe Şahin 9 Jul 11, 2021
Dribbble, but for web developers. A portal for sharing your web projects with the world.

Driwwwle The Idea ?? We've all visited Dribbble atleast once, right ? You know, the cool place where designers go to showcase their projects and their

Nitin Ranganath 37 Sep 18, 2021
A simple reddit clone

asperitas Asperitas is a full stack reddit clone that I wrote to learn more about Node.js, React, and NoSQL databases. The name asperitas comes from a

Deniz Basegmez 452 Sep 9, 2021
Mernmap Open Source Application Built With The MERN(Mongodb , ExpressJS, ReactJS, NodeJS)

Meanmap MERNMAP is an interactive map for mern(MongoDB, ExpressJS, ReactJS, NodeJS) Stack Developers all over the world. It provides an avenue where a

Ayeni Olusegun 9 May 24, 2021
A minimal operating system created with ReactJS

mindows A minimal Operating System created with React. About This project provides a minimal Windows 10 experience in browser. It runs completely on c

Piyush Madhusudan 83 Sep 13, 2021

Fakebooker 1.0.0 Fakebooker is an extensive open-source project that is essentially a clone of the real Facebook. Now Fakebooker is not one of those l

Kristian 142 Sep 13, 2021
My React.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube.

Roseflix: A Netflix Clone My React.js implementation of Netflix. Movie data was pulled from TMDB and trailer videos from Youtube. View Demo » Report B

Rose Bilag 65 Sep 4, 2021
Dribbble Clone built with MongoDB, ExpressJS, React, and Node Technologies. See demo at https://rb.gy/psll7v

Rumbbble Rumbbble, inspired by the Dribbble design community, serves as a portal for developers to showcase their work, receive feedback, and find ins

Abdul 113 Sep 12, 2021
A bot Similar to the reaction roles discord bot, but free. Written in JavaScript, and uses MongoDB.

An open source reaction roles bot to anyone who needs one in their server. It's easy to use, similar to the reaction roles bot and Totally Free. The bot also used MongoDB as a database!

null 29 Sep 2, 2021
ToolJet is an open-source no-code framework to build and deploy internal tools quickly without much effort from the engineering teams

ToolJet is an open-source no-code framework to build and deploy internal tools quickly without much effort from the engineering teams. You can connect to your data sources such as databases ( like PostgreSQL, MongoDB, Elasticsearch, etc ), API endpoints ( ToolJet supports importing OpenAPI spec & OAuth2 authorization) and external services ( like Stripe, Slack, Google Sheets, Airtable ) and use our pre-built UI widgets to build internal tools.

ToolJet 3.6k Sep 24, 2021
React features to enhance using Rollbar.js in React Applications

React features to enhance using Rollbar.js in React Applications

Rollbar 20 Sep 17, 2021
This project I created with Rodrigo Branas in the live about the micro frontends. For this presentation I used single-spa.js, vue.js and react on different micro frontends

live-microfrontends-with-branas Micro Frontend with Rodrigo Branas This project I created with Rodrigo Branas in the live about the micro frontends. F

Carlos Augusto Sempe Junior 6 Aug 16, 2021