zero-to-mastery / drum-root

Drum root is a React Web App for Creating and Sharing Drum Loops. See Drum Root API for Back End Service.

Features

• Create Drum Loops
• Record Custom Sounds
• Save and Share Drum Loops With Others

Table of content

• Installation
• Running
  • Locally in Development Mode
  • Storybook
• Testing
  • in Development Mode
• Building and Deploying
  • For Production
• Contributing
  • What To Know Before Contributing
  • Adding Name To Contributors List
• Style Guide
• Technologies
  • Front End
  • Back End
• Team Leaders
  • Current Team Lead Members
  • Past Team Lead Members
• License

Installation

To get it working, you need to install all the dependencies. And the best way to do this is through the Command Line Interface (CLI).

To get started, make sure you have either of the package manager, NPM or Yarn installed and working on your machine.

To install the packages through npm, run the command

npm install

To install the packages through yarn, run the command

yarn add

NOTE: In the rest of the documentation, you will come across npm being used for running commands. To use yarn in place of npm for the commands, simply substitute npm for yarn. Example, npm start as yarn start. For more help, checkout migrating from npm

⬆ Back to Top

Running

Locally in Development Mode

The backend code should be running in order for the front end to behave correctly. See Drum Root API.

To get started with the front end, fork the repository and run the following command on your local machine:

npm run dev

Storybook

Storybook is a way to view the components in isolation. To view Drum Root's storybook, run the following command:

npm run storybook

Testing

in Development Mode

If this is your first time running tests, begin by ensuring that the required packages are installed. install packages.

To get started with Unit Test, run the following command:

npm run test

To get started with Integration/End to End Test, run the following command:

npm run test:e2e

⬆ Back to Top

Building and Deploying

For Production

If you wanted to run this site in production, you should have installed packages. If not, install packages, then build the site with npm run build and run it with npm start:

npm run build
npm start

You should run npm run build again any time you make changes to the site.

⬆ Back to Top

Contributing

Drum Root happily accepts contributions.

What To Know Before Contributing

To begin contribution, there are some things you need to know, like what to do first, where to find tasks, any additional questions, and notes provided for contributors. You can begin at Contributing to Drum Root

Adding Name To Contributors List

We recommend every contributor to add their name to the contributors list. A detailed intructions on how to get this done be found at DRUM ROOT CONTRIBUTORS

⬆ Back to Top

Style Guide

The style guide is a set of standard outlined on how code should be written. We currently follow the AirBnB style guide, but you can checkout Drum Root style guide for any additional information.

⬆ Back to Top

Technologies

Front End

• React - JavaScript UI Library
• Next.js - Server Side Rendering
• Styled Components - Styling
• Jest - JavaScript Testing Framework
• React Testing Library - A library to test React UI components
• Puppeteer - A Node Library for Controlling Headless Chrome or Chromium. Used for end to end Testing
• Storybook - Tool for Developing UI Components in Isolation

Back End

• Express - Web Framework for Node.js
• PostgreSql - Relational Database(Coming Soon)
• Redis - In-Memory Data Structure Store used for Authorization(Coming Soon)

⬆ Back to Top

Team Leaders

Current Team Lead Members

• Project Lead - joshtru
• Front End Lead - needed
• Back End Lead - yashShelatkar
• QA Lead - zbc
• Database Lead - Aneesh
• Designer/ Styling Lead - LukasHirt

Past Team Lead Members

• rgavinc - Project Lead Oct 2019 - Jan 2020
• Dhaval - Front End Lead Oct 2019 - Nov 2019
• rvvergara - QA Lead Oct 2019 - Dec 2019
• marcoseoane - Front End Lead Nov 2019 - Dec 2019
• linconkusunoki - Designer/ Styling Lead Oct 2019 - Jan 2020

⬆ Back to Top

License

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

⬆ Back to Top