Skip to content

JoshMallery/BranchOut

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

branchOut

Group Project

Overview

If you are an instructor who struggles with an endless amount of paper documents to keep track of for all the impressive lessons you write, might we suggest you go out on a limb and trust branchOut with all your lesson planning needs! It's as simple as visiting the branchOut website to view courses and the lessons which go along with them, or if you're ready to write a whole new course, just click on the 'Add New Course' tab. This will allow you to enter your amazing content and write as many lessons as you need to go along with it. If you need some time to create new lesson ideas it is very easy to come back and add lessons to an existing course. Your genius plans will be safely stored in the branchOut database.

Project Views

Dashboard with Course and Lesson Views:

Dashboard and Course gif

Add a Form:

Form Errors

React

  • This multi page App with React was an exercise for us to learn and grow our knowledge of interacting with endpoints that were created from our API.

Cypress Testing

  • All Testing of User views and user interactions
  • Error Handling of Server errors and invalid URLS Tested
  • Fetch requests are stubbed

branchOutTesting

Local Set-Up Instructions

  • From the repo click the code button and copy the SSH link.

  • Open terminal by pressing command + space bar, and search for terminal

  • Inside of your terminal type git clone and then paste the ssh link. It should look like this: git@github.com:JoshMallery/BranchOut.git

  • In your terminal type cd branchOut

  • Type npm install

  • Do not run npm audit fix --force

  • Then type npm start This runs the app in the development mode.

  • Open http://localhost:3000 to view it in your browser.

  • The browser should then deploy using a local host

  • Enjoy using branchOut!

  • NOTE: Make sure that you type Control + C in your terminal when you are done using the application. This ensure the server will stop running before your close your Terminal.

Instructions for Use

  • On opening the browser, a user is free to scroll the current courses that exist in branchOut!
  • Each Course includes and overview and Author and lesson count.
  • A user can click on the course to view the list of lessons.
  • From there a user can click on individual lessons from the course.
  • Users can also navigate to the add a course tab and add a course and/or a lesson.

Technologies Used

  • React
  • React Router
  • Cypress Testing
  • GET requests
  • POST requests
  • DELETE requests
  • ES6 JavaScript
  • CSS
  • HTML
  • Fetch Web API

Future Features

  • User Login Page for Teachers or Students
  • Teacher and Student User Permissions, Student - read-only access

Project Management

Figma WireFrame

DashboardView

LessonView

Contributors

Image Credit

About

BranchOut Front End

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published