We create incredible neighborhoods and community spaces through meaningful shared events. You can find the deployed project at Community Calendar.
To preview features exclusive to registered users without registering, login with these guest credentials:
- username:
guest@email.com - password:
TestUser123
| Josue Rodriguez | Kennith Howe | Daniel Prue | Rachel Carter | Minakshi Verma |
| Skyler Dowdy | Louis Gelinas | Lowell Jacobs | Mark King | Ben Rogers | Westley Strellis |
Community Calendar is a single web application built with React and styled using SASS and the Bulma framework. Our data is stored and served by an Apollo GraphQL server. Mobile versions of the Community Calendar client are under development simultaneously for Adroid and iOS.
Community Calendar uses the apollo-client library to conduct GraphQL queries and store data in local cache for state management purposes. Authentication of users is accomplished through the Auth0 API.
- View a list of local events (Release 1, deployed 08JAN20)
- Sort events by how close they are to your neighborhood (Release 2, deployed 20JAN20)
- Create new events and manage your events (Release 2, deployed 20JAN20)
- RSVP to events (Release 2, deployed 20JAN20)
- Search events by location, price, and event details (Release 3)
- Create a user profile and manage events from a dashboard (Release 3)
- View events in an interactive map (future release)
- Comment on events and message hosts (future release)
- Integrate events from external APIs (future release)
| npm run | Description |
|---|---|
| start | Runs the app in development mode. Open http://localhost:3000 to view it in the browser. The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console. |
| test | Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit. |
| 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. |
This application uses Create-React-App and runs all build utils through react-scripts
Create a file for environment variables: .env .
- REACT_APP_OKTA_CLIENT_ID
- REACT_APP_OKTA_ISSUER
- REACT_APP_OKTA_REDIRECT_URI
- REACT_APP_APOLLO_SERVER
- REACT_APP_MAPBOX
- REACT_APP_GOOGLE_ANALYTICS_TAG
Install the ESLint extension: ESLint
Install the Prettier extension. Add the following configuration parameters to VS Code settings.json:
{
"prettier.requireConfig": true
}
This project uses Okta to authenticate user accounts. You can find a brief introduction to Okta and how this project uses it here
This project use Sass for stying. The Bulma library was incorporated to speed up development.
src/styles/ - contains classes, mixins, and variables that are used throughout the application.
src/styles/_variables.scss - contains variables such as colors, padding, and border radius that can be used within classes and mixins. To override a Bulma variable add a variable with the same name to this file. To use the variables in a component module this file file must be imported.
src/styles/_mixins.scss - styles that can be added to classes with @include mixin_name. To use the variables in a component module this file file must be imported.
src/styles/_helper_classes.scss - utility classes created by the CC devs. These classes are available globally.
src/styles/_bulma_overrides.scss - this is used to override the implementation of classes from Bulma. The class will retain any styles that are not altered in this file.
src/components/**/*.module.scss - contains styles for a component or group of components.
Jest is use for snapshot, unit, and integration tests.
The Testing-Library/React library is used to help test React components. It includes many utilities that simplify setting up and testing React components. '@testing-library/jest-dom' provides additional assertion methods. '@testing-library/user-event' has utilities for simulating user events such as clicking on a button.
There are a few key considerations for the development team inheriting development of this application:
Apollo Client is a complete state management library for React apps that use GraphQL. The @apollo/react-hooks library's tools for conducting GraphQL queries and mutations and storing fetched results from the network in a local cache are excellent. You never need to put the results of your useQuery hooks or other network requests into local state, because the Apollo Client automatically does that in their cache. Future queries qith readQuery will pull data from the local cache first, or will go back to the network if needed.
However, Apollo Client's tools for local state management through the useApolloClient() hook at cache.writeData method are much more limited. They are billed as a replacement for Redux, but actually leave a lot to be desired. The Apollo Client local state features are documented here and are also demonstrated in their tutorial here. Our recommendation to future developers is to implement a Redux store alongside the Apollo Client for storing local state (user location, preferences, etc).
There are several other dependencies that use of Apollo Client brought in to our project, including apollo-cache-inmemory, apollo-client, apollo-link, apollo-link-context, apollo-link-error, apollo-link-http, and apollo-upload-client. To get familiar with the Apollo stack we recommend doing their entire official tutorial to help understand how these pieces work together.
react-hook-form was our library of choice for managing form state and validation. It works alongside Yup in a similar fashion to Formik, but give you some more flexibility and control over your submitter, handler, and error methods.
apollo-upload-client and react-dropzone are used together to accomplish media upload by embedding image files in GraphQL mutation requests. The image files are resolved on the backend, where the files are uploaded to a hosting service with the URL stored in the database.
When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
Please note we have a code of conduct. Please follow it in all your interactions with the project.
If you are having an issue with the existing project code, please submit a bug report under the following guidelines:
- Check first to see if your issue has already been reported.
- Check to see if the issue has recently been fixed by attempting to reproduce the issue using the latest master branch in the repository.
- Create a live example of the problem.
- Submit a detailed bug report including your environment & browser, steps to reproduce the issue, actual and expected outcomes, where you believe the issue is originating from, and any potential solutions you have considered.
We would love to hear from you about new features which would improve this app and further the aims of our project. Please provide as much detail and information as possible to show us why you think your new feature should be implemented.
If you have developed a patch, bug fix, or new feature that would improve this app, please submit a pull request. It is best to communicate your ideas with the developers first before investing a great deal of time into a pull request to ensure that it will mesh smoothly with the project.
Remember that this project is licensed under the MIT license, and by submitting a pull request, you agree that your work will be, too.
- Ensure any install or build dependencies are removed before the end of the layer when doing a build.
- Update the README.md with details of changes to the interface, including new plist variables, exposed ports, useful file locations and container parameters.
- Ensure that your code conforms to our existing code conventions and test coverage.
- Include the relevant issue number, if applicable.
- You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you.
These contribution guidelines have been adapted from this good-Contributing.md-template.