asiandrummer / ainosworship

Ainos Worship

We're a group of musicians devoting ourselves to God!

This project was bootstrapped with Create React App.

Getting Started

• Clone this repo, and run yarn to install dependencies

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

Don't ever run this. Ever. We don't need to.

yarn deploy

Deploys the app to ainosworship.com after building and running some scripts.

ainosworship's Issues

Update the placeholder text with our invitation text

Remove "Lorem Ipsum..." from JoinUs.react.js and insert the invitation text (to be provided later). I'll update this issue once we have the text ready.

Connect MongoDB atlas to this app, make submit work

Implement picture carousel (horizontal scroll component)

Kind of like this https://glidejs.com/docs/setup/ but we can build our own/use other things.

The "Home" icon should use icon button instead

The Home icon, when clicked, goes back to the home page, and it's currently just an icon. Using an icon button (https://material.io/develop/web/components/buttons/icon-buttons/) allows the button to have appropriate UI aspects such as hover states/ripple effect when clicked/etc.

The react component to use is here: https://github.com/material-components/material-components-web-react/tree/master/packages/icon-button

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Implement "Music" page

This feature will build a fully thought-out "music" page that hosts/embeds our YouTube music links for visitors to listen to. There are several elements/requirements to building out this page:

• Build an appropriate route and link it to the "Music" page
• The page skeleton should be similar to others - sticky header, grid layout, etc.
• List the embedded YouTube videos with some basic info: date, name of the song, etc

Provide status update to form submit

When users visit the page and click the "Click to Apply" button to open a dialog, there's a form that they can fill out and click submit to send a request to our cloud database. This task is to build a number of features:

• When users click submit, there's going to be a delay between the request being sent and the response being returned. We need to put on the dialog (without closing) an indeterministic circular loading indicator, something from this list: https://loading.io/css/
• If the request was completed (regardless of the status), the dialog should be closed and the snackbar (https://material.io/develop/web/components/snackbars/) should appear to indicate the result:
  • If successful, show "Successfully sent."
  • If error, show "There was an error."

Practically these messages could be a lot better (e.g. in error state, allow to retry), but we can get these done first and think about the next steps later.

Need more space below `joinus` page

Currently it looks like this:

We should have more space at the bottom of the page so that the page doesn't feel as packed. A desired outcome would be:

One of the ways to do this is to insert an empty <div className="footer" /> in JoinUs.react.js and give a dedicated height to footer in JoinUs.scss.