Skip to content
/ VoxBox Public
forked from mmelcot/herokuing

Volunteer xChange Box is a social platform made by students in HYF Belgium that is aimed to connect both volunteers and help seekers within a community so that we can focus on channeling our inner good and assist each other to build a stronger foundation of a better world.

License

Notifications You must be signed in to change notification settings

gelilaa/VoxBox

 
 

Repository files navigation

Volunteer xChange Box

VoxBox is a social platform made by students in HYF Belgium that is aimed to connect both volunteers and help seekers within a community so that we can focus on channeling our inner good and assist each other to build a stronger foundation of a better world.

Contents

About

VoxBox is a social platform that is aimed to connect volunteers and people who needs some help within a community. VoxBox is made by students in HackYourFuture Belgium as a part of final assignment after following eight months of a solid coding course. This project is inspired by daily difficulties faced both in 2020 during the COVID-19 pandemic and in any other regular days. The team hopes that providing help could be a part of our daily activities as social beings.

Why Volunteer?

Volunteering within a community is a natural way to meet contacts and know our surrounding. Volunteering is also a great example of compassion, solidarity and responsibility - HelpGuide

Click to watch VoxBox video

Tools and Technologies

Front End

  • Figma - Design
  • HTML
  • CSS
  • JavaScript
  • React.js
  • Redux
  • Bootstrap
  • React Bootstrap

Back End

  • Node.js
  • Express.js
  • MySQL
  • Sequelize

Deployment

  • Heroku

Contribution

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b new-branch)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin new-branch)
  5. Open a Pull Request

Contact

You can contact the people who work on this project

License

Distributed under the MIT License. See LICENSE for more information.

Organized for Deployment

A model of how you can set up your project for development, testing & deployment.

General

Configuration

This application reads the secrets from a .env file at the root of this project. A secret is something you don't want to commit to a public repository. The password for your database for instance. A node package dotenv is used to read and parse this file and provides an interface we can use.

Create a file called .env to the root.

DB_HOST=YOUR_IP_OR_DOMAIN
DB_NAME=YOUR_DATABASE_NAME
DB_USER=YOUR_DATABASE_USER
DB_PASSWORD=YOUR_DATABASE_USER_PASSWORD
JWT_SECRET=A_JWT_SECRET_A_RANDOM_STRING_OF_CHARACTERS

DB_HOST A domain or IP the host of your database.

DB_NAME The name of your database. The application will connect to this database.

DB_USER User used to authenticate to the database. Typically a user called root is created in MySQL. Although it is not recommend to use that user in production.

JWT_SECRET Within the app a standard called JWT is used to manage authorization. This requires a random complicated password like string to sign tokens.

Development

Getting started

Make sure you configure your secrets in line with your development environment. See the configuration section.

Install backend dependencies.

npm install

Install frontend dependencies

yarn install

Database

Your application will need to persist data. The interaction with the database is abstracted by an ORM (Object role modelling) called Sequalize .

Make sure you configure your secrets in line with your development environment. See the configuration section. You can create the database and tables by running the sync.js script.

node api/scripts/sync.js

Optionally you can seed the tables with some test data by running:

node api/scripts/seed.js

API (Backend)

To develop just the API separately from the frontend run:

npm run dev-api

This will run your api as though it were part of the full live project. All routes will be have api/ appended before them and a get request to / will return the string "frontend"

Client (Frontend)

To develop just the frontend separately from the API run:

npm run dev-client

DISCLAIMER! this will only work if you have set up a mock-api

Full App

You can also develop the frontend and API in parallel by running:

npm run dev

This script will run the frontend and backend on separate ports, the backend on localhost:5000 with nodemon. The frontend will be run using create-react-app's start script, redirecting all API calls to localhost:5000.

You can find more details on the Instalation Wiki page

TOP


Deployment

The main index.js in this directory is for deployment. It provides access to your api behind /api and statically serves the client from /client/build. You can copy-paste this file directly, there should be need to modify it for your project.

In order for your project to run on Heroku, the main package.json needs a start command. This is already taken care of for you.

Mock

To mock deployment on your local machine you can run these commands. The app will build and run the same as it will on Heroku to help you troubleshoot your deployed project locally.

npm run heroku-postbuild
npm run start

Getting started

Create a Heroku account and install the Heroku cli. Verify the installation with

heroku status

Initialize Heroku inside the project folder by using:

heroku create

Note it is likely you want to create the app with some options, a useful for the project.

Manual

You can deploy your project from your local machine by pushing to the Heroku master repository.

git push heroku master

TOP


Testing

To locally execute your tests, run the following commands

Frontend

cd client
npm install

Backend

cd api
npm install

Continuous integration

Test run on each commit on the master branch using Github actions. The configuration can be found in .github/workflows/node.js.yml.

TOP


Helpful Links

TOP


About

Volunteer xChange Box is a social platform made by students in HYF Belgium that is aimed to connect both volunteers and help seekers within a community so that we can focus on channeling our inner good and assist each other to build a stronger foundation of a better world.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 84.5%
  • CSS 14.4%
  • Other 1.1%