KINDLY: Be Good to Your Neighbors!

Fig 1: The entire homepage for a logged-in user!

TABLE OF CONTENTS

1. Description
2. Installation
3. Usage
4. Technologies
5. Contribution
6. License
7. About

Description

A social volunteering application for doing good deeds and participating in volunteering events in your area. Discuss and plan in a comment/reply message board format. Earn Kindly Points with your participation as events get verified by those who attended.

This project can be found:

• GitHub Respository
• Live Deployment

Installation

Make sure you have at least version 6.14.15 of npm installed.

Go to the repository and clone it by entering git clone https://github.com/brentocracy/kindly.git. You may also fork the repo.

Run npm install to include all dependencies. The dependencies include:

ROOT DEPENDENCIES

• Concurrently
• React-Router-DOM
• cors
• Apollo-Server-Express
• GraphQL (also utilized for server and client)

SERVER-SIDE DEPENDENCIES

• bcrypt
• dotenv
• Express
• faker
• Mongoose
• jsonwebtoken

CLIENT-SIDE DEPENDENCIES

• Apollo Client
• GraphQL-Tag
• JWT-Decode
• React
• Jest-DOM

DEVELOPERS:

To run both the back and front end servers, enter command npm run develop from the project root. This will use concurrently to run both servers.

NOTE: To run the app in the development environment, you must do these two things:

-- In App.js in /client, switch the commented url attribute in the httplink near the beginning of the script to /localhost:3001/graphql.

-- In server.js in server, comment out the * build path directive near the bottom of the script.

You will be able to view GraphQL's playground for the database's queries and mutations via localhost:3001/graphql.

These things should be reversed when pushing back up to prepare it for possible deployment to Heroku.

Usage

Kindly can be used by anyone interested in doing good work within their communities. Right now, it is a general free-for-all regarding location, so make sure to check the locations of posted events and good deeds. A future iteration of the application will allow for robustly-verified and neighborhood-specific groupings of users and events. Users without an account (or if they are not logged in) can view events and good deeds but cannot interact with them or the other users, so be sure to get an account to get full functionality and engagement of Kindly.

General

This is a pretty straight-forward user experience, which was the intention of the coders. The database is set up using mongoose to represent MongoDB data, with GraphQL building typedefs (defining the types we want each query and mutation to accept ) and resolvers (the intermediary functions which go and get the data from MongoDB and return what is desired to the front end).

Data is then queried and mutated on the front to render to the React views, with many conditional renders put into place for a dynamic app experience. Apollo is used on the front end to cache the changes to the state so it persists even after a browser reload. For example, this is the functionality used when a user leaves an event:

    // use the prepared mutation for leaving an event represented in a variable
    const [leaveEvent] = useMutation(LEAVE_EVENT, {
    update(cache, { data: { leaveEvent } }) {
      try {
        // get the currently-cached logged-in user data from the cache
        const { me } = cache.readQuery({ query: QUERY_ME });
        // query the logged-in user to update the events array for that user in the cache
        cache.writeQuery({
          query: QUERY_ME,
          data: { me: { ...me, events: me.events.filter((event) => event._id !== leaveEvent._id) } },
        });
      } catch (e) {
        throw new Error(e);
      }
    }
  });

As a user of Kindly, one can do a bunch of things by their neighbors, but there are sign up and log in privileges to mention first.

Signing Up and Logging In

JSON Web Tokens are used to authorize users and give them application permissions. If a user is not logged in, events and good deeds will still be shown but there will be no ability to interact with them. An account is necessary to participate in all of the fun stuff! Passwords needs to be at least eight characters, and more stringent validation will be upcoming in a near iteration.

Kindly User Engagements

The landing page consists of two columns: the left-hand side for user-specific information (including events and good deeds only pertaining to that user). The right-hand side will show all events and good deeds (they can be toggled), with the ability to join, leave, and verify. Users can post comments within events to discuss planning and clown around if need be.

-- HOSTING EVENTS

Click the Create an Event button, input your info, and voila. Your event will show in your sidebar as well as in the list of all events, which will still be organized by date happening. Hosts may not attend their events, only cancel them if need be.

You may also ask for help by posting a Good Deed, or help someone in need and volunteering to be the helper for one already posted. Good Deeds may only have one helper, whereas events can have an unlimited number of attendees. Only one host is currently allowable per event or good deed.

-- COMMENTS

Fig 2: Have you seen these names?!

You can post comments to an event any time you want to discuss plans or other funny things with the host and the attendees. Hopefully, your name is half as cool as it is for these guys.

-- USER PROFILES

Fig 3: Check out that sweet penguin pic!

Users can click on their name on the sidebar or the name of another user on an event card or good deed card to view a specific profile with an extensive list of their upcoming events and good deeds. This will also be a place for messaging and checking connections with other users (a friend system) in an eventual feature update.

-- THE POINTS SYSTEM

This is the good stuff.

Once an event has passed, all attending users will see a button to verify that the event happened successfully. After half of the attendees have verified the event, Kindly Points are awarded to all of them (and the host!) and their points are updated on their profiles in real-time. Show off your points! Be the talk of the community!

To recap, three functions need to return true in order for an event to be officially verified. Here they are:

    // check if more than half of attendees have verified event
    const isHalfOfAttendees = () => {
      return event.verify.length < Math.ceil(attendees.length / 2);
    };

    // check whether or not the user has already clicked to verify the event (users may only verify once)
    const checkUserVerify = () => {
      const arrUsersVerified = [];
      // re-create array of users who have verified the event so far
      for (let i = 0; i < event.verify.length; i++) {
        arrUsersVerified.push(event.verify[i].user._id);
      }
      // if the current logged-in user has already verified, return true
      if (arrUsersVerified.includes(me._id)) {
        return true;
      }
      return false;
    }

    const eventPassed = () => {
      // convert dates to new date objs for comparison
      let today = new Date();
      let eventDateObj = new Date(event.date);
      /* if today's date is before the event date, the event has not happened and return false
      otherwise, today is equal to or past the event and return true */
      return today < eventDateObj ? false : true;
    };

After an event is points-deliverable, the host and attendees will see a warm green disabled button reminding them of their massive success. Any other users not associated with the event will see a kinda warm yellow disabled button telling them the event has passed and there is no way to interact with it any longer, as shown below.

Fig 4: Oooooh, different colors!

Technologies

The following were used for this project:

• HTML
• CSS
• TailwindCSS
• JavaScript
• Node
• Express
• MongoDB
• Mongoose
• React
• GraphQL
• Apollo Server and Apollo Client
• Git
• Coded in VS Code

Contribution

We welcome contributions from other fine developers.

If you would like to contribute to this project:

Navigate to your workspace in your terminal and clone the repository code there using git clone. Make sure to create your own branch with git checkout -b branch-name and open up a pull request to push changes.

Licensing

This application is not operating under a license, but as noted above, pull requests and collaborations are subject for approval.

About

This application was a happy collaboration between:

Brent Gaines:

I am a Full-Stack Web Developer committed to building fun and efficient projects, and bringing humor to tech wherever possible.

Kindly reach out at [email protected]!

Connect with me:

GITHUB PROFILE

PORTFOLIO

Michelle Wehr:

Passionate full-stack developer.

You can reach me at [email protected].

GITHUB PROFILE

PORTFOLIO

Maki A Maki:

I'm Maki (pronounced Mekki) from CT USA, and I am a Full-Stack Web Developer. I am passionate about helping create solutions to big problems and collaborating with a team of passionate programmers.

GITHUB PROFILE

PORTFOLIO

Dave Toth:

Full Stack Web Developer combined with a long history of Project Managment experience. Reach out me at

GITHUB PROFILE

PORTFOLIO