Access the launched application online here.
- Overview
- Motivation
- Examples
- Access App
- Use App
- Learning Goals
- Future features
- Technologies used
- Reflections & Wins
- Contributors
This is a social media application where a user can create an account, view information about their Myers-Briggs Type Indicator (MBTI) and Enneagram types on their profile, as well as follow and view the profiles of their friends.
This application was created as the final Capstone Project for Turing School of Software & Design.
The topic was chosen because we thought that it would be useful to have and use in our everyday lives. Especially in our collaborative work at Turing and throughout our personal and professional lives, we recognized the value of having a tool where we can quickly learn about peoples' strengths and motivations. EnneaLink opens the door for meaningful conversations that can create inclusive interactions across interpersonal and collaborative work.
Access the application online here.
Run the following codes in the terminal, in this order.
-
Clone the project repository:
git clone https://github.com/EnneaLink/ennealink-fe.git -
Navigate to the folder:
cd ennealink-fe -
Install dependencies:
npm install -
Run local host:
npm start
If it doesn't automatically open, navigate to http://localhost:3000 in your web browser.
When a user first opens the application, they must create a unique username and a password. Once they do that, they must select and save their Enneagram and MBTI types via dropdowns to create their profile. If the user does not yet know their types, there are links to take the respective tests that open in new tabs.
Once their types are selected, the user is directed to their profile, where they can access a summary of each of their types, as well as external links to read more.
To add friends to follow, the user must click "friends" in the navigation bar, which takes them to a live search of all users. If they click a username, they are directed to that user's profile, where they can read about that user's types.
To follow that friend, the user can click the "follow" botton on the bottom of the friend's profile. Once the friend is created, the friend will be viewable on the "friends" page, easily accessible at any time, with their types right next to their username on the link. As with search, the user just needs to click the friend's name to view their friend's profile. To remove a friend, just click "unfollow" at the bottom of the friend's profile.
The main goals of this project were learning and implementing GraphQL from scratch, gaining more experience with React hooks, and working in tandem with a backend team for the first time.
-
User can access a list of other users who follow them.
-
User can upload an avatar.
-
User can see how their type interacts with their friends’ types.
-
User can edit their username and types.
Utilizes JavaScript, React, CSS, HTML/JSX, NPM, Node, Cypress, CircleCI, Heroku, and GraphQL
Built with Visual Studio Code and Atom
Communication via GitHub Projects and Zoom
Code stored on GitHub:
- With the tight turnaround of just over two weeks for the project deadline, our full-stack team of 5 (3 frontend and 2 backend team members) learned GraphQL to be implemented on both backend and frontend (Apollo Client). This required us to rapidly learn both independently and collaboratively as we successfully used this new stretch technology in our project.
- We were strategic in designing a productive workflow and creating clear lines of communication between our respective teams.
- Our team thrived in paired programming as we all brought various strengths to the project, as well as divided tasks effectively to meet our strict deadlines.
- In our first full stack project working with the backend team, we were able to spend the first phase of the project communicating and collaborating about what data we would need from the backend, where we would make requests for that data, and utilize the benefits of GraphQL to prevent us from over or under-fetching data.
👤 Kim Abcouwer
👤 Gunnar Runkle
👤 Hayley Witherell
👤 Mark Cawthray
👤 Natalie McIntyre