No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/img
public
src
the-paths
.gitignore
LICENSE
README.md
package-lock.json
package.json
static.json

README.md

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 https://melata-app.firebaseapp.com/ for the live site.
You can find our API documentation here.

Instructions

  • 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.

    *HAPPY CODING

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

Screenshots

Guest Landing Page

landing page guest

Login Page

login page

Guest Classroom

guest classroom

Dashboard

dashboard

Explore Page

explore

Path Overview

path overview

User Classroom

user classroom

Contributions

Contributions to the application are accepted.

Built With

Authors

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

License

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

Acknowledgments

Thinkful