Giter VIP home page Giter VIP logo

edplatform's Introduction

World's best tutorial platform

Learn everything, seriously.

App preview

Preview App

If you have Expo installed on your phone, you can scan the QR code here to preview the application on your phone. Otherwise, here's a built web version that you can preview in the browser. Please keep in mind that this was built for mobile using React Native, so some features, like RefreshControl, do not work in the web version.

Build for yourself

1. Clone the app

git clone https://github.com/Kharouk/EdPlatform.git && cd EdPlatform

2. Install dependencies

npm i or yarn

3. Run the app

npm start or yarn start

4. If you have Expo Go on your mobile device, scan the barcode. Otherwise click Run in web browser

5. Run tests (tests can be found within the /utils directory)

npm test

Approach

  • Enjoyed revisiting React Native after a long hiatus. Worked with React commercially for almost 3 years so thought I'd try React Native instead for a bonus challenge.
  • Decided to keep it simple however and use Expo as a way to build the application. Thought it would be easier to share as well once I finished the challenge.
  • Implementing the logic was a faster process than designing the application, it was interesting to learn about React Native through their documentation and how the component hierarchy is structured.

Improvements

Some things I would implement or improve if I had more time (which I wish I did as I enjoyed building this out).

  1. Each Video tutorial would have it's own page, with more information about the tutorial such as description or comments
  2. Engagement within the platform; creating accounts, favorite videos, comments, affecting the ratings
  3. Better GRID layout and more engaging UI
  4. Have the two search boxes work in unison so that you can search for a teacher name as well as get the tags of videos associated to that teacher
  5. Search by multiple tags at a time
  6. Relationships:
    • Building a relational structure that matches videos to teacher IDs
    • having a teachers page that shows all the related videos to that teacher
  7. Building all these components that are UI focused made me realise how important it would be to have a tool like Storybook to help use with testing purposes and faster development
  8. React Native UI testing; Function testing or E2E testing

I would also eject from using Expo so that I was dealing with essentially the native versions for both Android and IOS. I would then use a potential cloud storage to handle potential authentication features.

We would also migrate from using a base JSON file as the data structure to store all our video metadata as that would get far too big. I would use something like AWS Amplify to get us started as we are already in the ecosystem and can scale from there.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.