uzair-ashraf / good-deed

A full stack JavaScript application for users to commit deeds for other users.

good-deed

A full stack JavaScript application for users to commit deeds for other users.

Technologies Used

• React.js
• Webpack 4
• PHP
• MySQL
• HTML5
• CSS3
• AWS EC2

Live Demo

Try the application live at https://gooddeed.uzairashraf.dev/

To login use the username dantheman with no password

ctrl + shift + i to open dev tools

preview in iPhone X for optimal viewing

Features

• User can request deeds they need done
• User can commit deeds they find
• User can see all available deeds in their area with a 10 mile radius
• User can see their profile
• User can see their overall rating on their profile
• User can see reviews from other users on their profile
• User can mark their deed completed
• User can leave a rating for the work the other user did
• User can leave a review for the work the other user did
• User can upload a photo for their profile

Preview

Development

System Requirements

• NPM 6 or higher
• MySQL 7 or higher
• Google Maps Javascript API Key
• Google Maps Geocoding API Key

Getting Started

1. Clone the repository.

   git clone https://github.com/uzair-ashraf/good-deed.git
   cd good-deed

2. Install all dependencies with NPM.

   npm install

3. Import the example database to MySQL.

   dummy-data/good-deed.sql

4. Start the project. Once started you can view the application by opening http://localhost:3000 in your browser.

   npm run dev

good-deed's Issues

2) User can view personal dash board

User can view personalized dash board

Task List

• Create a stateful component called dashboard.jsx
• Pass the user data as a prop to the dashboard after login
• Add a conditional to setView to display the dashboard
• create users profile short display
• create container for users recent reviews
• create a stateful footer component called footer.jsx
• create five initital methods in app.jsx to pass in as props to footer.jsx for navigation.
• create navigation system and change callbacks based off which button is visible in the the state of the footer

1) User can login

User can login to dash board

Task List

• Create user table inside good deed database as the same as the schema
  https://app.dbdesigner.net/designer/schema/275753
• Create inital files through npm
• Add configure file to run development server
• create App.jsx for component folder
• create stateful header component to copy the first page of the figma
• create stateful login-page component to to take in login information of user
• create dummy data inside sql to match login information of first test user
• create login.php endpoint to send query to database with the data recieved from login page component
• add a method to app.jsx to connect to endpoint and create a fetch call
• add a this.setView state onto the app.jsx component
• create conditional to change the user view after the login query was succesful
• add conditional to state whether the login information was correct or not