lkarpins / pick-me-up

Table of Contents

• Project Overview
• Learning Goals
• Technologies and Tools
• Roadmap
• Setup
• Contributors

Project Overview

Everyone has bad days…PickMeUp is an application that provides an uplifting compliment and/or a solid piece of advice to put a smile on your face! Users have the opportunity to browse through a variety of compliments/advice as well as favorite their most liked!

The stretch technology we chose as a group was TypeScript. TypeScript is an increasingly popular programming language and many employers are seeking TypeScript experience. The key augmentation TypeScript brings to JavaScript is a type system (hence the name “TypeScript”). Below are just a few benefits of using TypeScript in React:

• Readable, easily understandable code
• Interfaces
• Better support for JSX
• Easier debugging while writing code

Throughout this project, we took full advantage of React’s modular nature by creating dynamically rendered components and views. This helped us keep the app small yet provided the user with a pleasant experience. We implemented thoughtful architecture through the use of shared utilities, global extendable interfaces, and views. We implemented Local Storage to store our favorite compliments and pieces of advice. We styled the app using shared classes that reduced the amount of repeated CSS throughout the app as well as applying media queries to make everything mobile responsive. We recognized the value of typescript while working through the functionality and feel confident in the product we created.

Learning Goals

• Continue to gain competency with React Fundamentals
• Create a multi-page UX using Router
• Practice refactoring class based components to use react hooks
• Continue to learn how to test React components & asynchronous JS
• End to end testing with Cypress

Our application includes the following core functionality:

• Displays the data from the API in a way that applies directly to our audience
• Ability for users to store/manipulate the data displayed in the application, such as favoriting and un-favoriting and storing favorites in Local Storage
• Multiple views handled by Router
• App deployment using Heroku

Planning Documents

MVP proposal

Wireframes

Project Spec

Illustrations

Deployed Link

Functionality Video

Responsiveness Video

Technologies and Tools

• JavaScript
• TypeScript
• React
• React Router
• HTML
• CSS
• Cypress
• Mocha
• Chai
• Fetch API
• NPM
• Webpack
• Heroku

Roadmap

Future features could include:

• Add functionality to allow a users to add/post personalized compliments or advice
• Add feature to connect with other users and send compliments or advice
• Include images or music to enhance user experience

Setup to Run Locally

1. Fork and clone this repository
2. Cd into the root directory and run npm i
3. To run this server, run npm start in the terminal and React will start the development server. To stop the local server, use command Control + C.
4. Open a browser window and go to http://localhost:3000 to view the website
5. To run the testing suite, run npm run cypress and Cypress will open up.

Contributors

Rachel Allen

• LinkedIn
• GitHub

Lourdes Benites

• LinkedIn
• GitHub

Lidia Karpinski

• LinkedIn
• GitHub

pick-me-up's Issues

Set up App.tsx

Set up App.tsx to render a compliment and a piece of advice on the dom.

Favoriting compliments/advice Functionality

• Make the FavoritesView component
• See Favorites button on nav will be wrapped in a link to route back and forth from favorites to main
• Wire up the heart material UI icon with an onClick to add a favorite compliment/advice to the favoritesView from the selectionsView
• Need to do some styling to match the wireframe for the favoritesView

Styling for Compliment and Advice Views

• Refactor ComplimentContainer and AdviceContainer into a single component and make it dynamic for views and styling.
• Style views with gradient, text size
• Add material UI icons for close (x) and favorite (<3)
• Wrap close in a Link to take you back to home page
• Add CSS styling to capitalize first letter in compliment

Testing with Cypress

Write cypress tests for all views:

• HomeView
• SelectionsView
• FavoritesView

Accessibility/Error Handling

• Utilized try catch with helper function in utils files
• Used ErrorBoundary with ErrorBoundary package
• Styled ErrorView Component

Set up ApiCalls.tsx

Utilized async / await and fetched compliment and advice API data to randomize a compliment and a piece of advice on the DOM.
Hooked up ApiCalls to App.
A random compliment and piece of advice correctly displays on the DOM.

Implementation of Router

User stories for Home Page

• As a user when I arrive to the site I see a two questions side by side.
• As a user when I arrive to the site I should see a nav bar with the "Pick Me Up" title and a "See Favorites" button.
• As a user when I arrive to the site I should see a "Get a Compliment" and a "Get Some Advice" button.

Apply some styling to page.