Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Melata's Frontend

code style: prettier

Application details

Melata is a one stop shop for the coding newbie. It has instructional videos along with an essential IDE to code along with on the same screen. Users can pick through an assortment of languages and frameworks to learn the lastest 'best-practices' in the industry. Sample code is provided with each video to be able to follow along with the developer inspired instructional videos.

Where to find

You can visit for the live site.
You can find our API documentation here.


  • As a guest you can visit the first video in the path of your choosing.

  • Creating an account with a username and email, and password will lead you to a landing page dashboard where you can view the current Paths that you are working on, saved Paths for future reference, and completed paths.

  • Choosing the explore option will give you access to the Paths with an choice to start, save, or view the Path as a whole, with a breakdown of the contents included in the Path.

  • Once you have saved some Paths, or started one, you will be taken to a classroom page where a modal will give you some more instructions on how to navigate the classroom page.

  • In the classroom you will be shown a video and have an coding editor presented to you.

  • The video will not automatically start and once started it, it will retain your place in the video if you happen to leave and come back.

  • The structure of the editor has 3 parts.

    1.Accessing the file tree.

    2.The editor to work in.

    3.A browser like windwow that has a play button and 2 tabs.

  • Access the file tree by clicking the page icon located on the left.

  • Clicking on the editor will allow you to add to the code.

  • The browser-like window has a result tab to display the editors results and a console tab to display the developer tool of a console.

  • Clicking the play button will run the editor and display the beautiful codework you did.


Coding styles

  • React was used for the components to display the various forms of information

  • React-Redux was used for the management of the state


Guest Landing Page

landing page guest

Login Page

login page

Guest Classroom

guest classroom



Explore Page


Path Overview

path overview

User Classroom

user classroom


Contributions to the application are accepted.

Built With


Initial work Jimm Lusk | Sayed Khan | Dameon Mendoza | Terrance Corley


This project is licensed under the MIT License - see the file for details




No description, website, or topics provided.




No releases published


No packages published