indianakuffer / myalpaca

myAlpaca

• Overview
  • Team Members
  • Team Expectations
  • Permissions
• MVP
  • Goals
  • Schema
  • Libraries
  • Client (Front End)
    • Wireframes
    • Component Hierarchy
    • Component Breakdown
    • Component Estimates
  • Server (Back End)
    • ERD Model
    • Data Hierarchy
• Post-MVP
• Code Showcase
• Code Issues & Resolutions

Overview

Team Members

Created, designed, and developed by Misbah Ali, Jason Kang, and Zulay Scottborgh (Git Czar) for the General Assembly Software Engineering Immersive (July ’20 Cohort) Unit 3 Group Project.

Team Expectations

Team values and expectations can be found on our project's Group Expectation Setting Document.

Permissions

Digital assets used with full licensing and permission from Unsplash.

MVP

The myAlpaca is an app that will give students who are studying abroad an easy way to maneuver their new environment. The app will allow users to register for an account and create profiles that include the parameters of their choice such as their area of studies, interests, hobbies, and priorities.

Goals

• Create a NoSQL database with MongoDB, to host all user information.
• Create CRUD functionality for creating, updating, reading and deleting user on the backend
• Use the React framework to imprement front end CRUD functionality from registering a user, updating information and deactivating/deleting an account
• Deploying the app to Netlify or other similar services

Schema

const User = new Schema(
  {
    username: { type: String, required: true },
    email: { type: String, required: true },
    password: { type: String, required: true },
    from_location: {type: String},
    to_location: {type: String},
    education: {type: String},
    area_of_study: {type: Array},
    interests: {type: Array},
    hobbies: {type: Array},
    assistance: {type: Array},
    priorities: {type: Array}
      },
  { timestamps: true }
)

module.exports = mongoose.model('users', User)

Libraries

Library	Description
React	Powers the application functionality/environment
React Router	Allows application to be navigable without having to refresh the page.
MongoDB	A document-oriented NoSQL database used for high volume data storage.
Express	A Node.js web application server framework, designed for building multi-page web applications
Express Router	Express router is a class which helps us to create router handlers

Client (Front End)

Wireframes

myAlpaca Wireframe + Style Guide

• Desktop Layout for Home Page, Register User, Build Profile, Delete Profile

Component Hierarchy

####front end
src
|__ components/
      |__ shared/
            |__ Footer/
                  |__ Footer.jsx
                  |__ Footer.css     
            |__ Header/
                  |__ Header.jsx
                  |__ Header.css  
|__ screens/
      |__ RegisterPage/
            |__ RegisterPage.jsx
            |__ RegisterPage.css
      |__ UserCreate/
            |__ UserCreate.jsx
            |__ UserCreate.css
      |__ UserEdit/
            |__ UserEdit.jsx
            |__ UserEdit.css
      |__ UserDelete/
            |__ UserDelete.jsx
            |__ UserDelete.css
      |__ Home/
|__ services/
      |__ apiConfig.jsx
      |__ users.jsx
|__ utils/
|__ App.js
|__ index.js

####backend
|__ components/
    |__ users.js
|__ db/
    |__ connection.js
|__ models/
    |__ user.js
|__ routes/
    |__ users.js
|__ seed/
    |__ users.js
|__ .gitignore
|__ package.json
|__ server.js

Component Breakdown

Component	Type	state	props	Description
Header	functional	n	n	The header will contain the navigation and logo.
Navigation	functional	n	n	The navigation will provide a link to each of the pages.
Gallery	class	y	n	The gallery will render the posts using cards in flexbox.
Gallery Card	functional	n	y	The cards will render the post info via props.
Footer	functional	n	n	The footer will show info about me and a link to my portfolio.

Component Estimates

Task	Priority	Estimated Time	Time Invested	Actual Time
Add Contact Form	L	3 hrs	2 hrs	3 hrs
Create CRUD Actions	H	3 hrs	1 hrs	TBD
TOTAL		6 hrs	3 hrs	TBD

Server (Back End)

ERD Model

Whimsical Diagram

Data Hierarchy

controllers
|__ users.js
|
db
|__ connection.js
|
models
|__ user.js
|
routes
|__ users.js
|
seed
|__ users.js
|
.gitignore
package.json
server.js

---

Post-MVP

The goals for this project post-MVP are as follows:

• Homepage build-out
• Log In Page?
• Restaurant Page
• Search Bar functionality

---

Code Showcase

Use this section to include a brief code snippet of functionality that you are proud of and a brief description.

Code Issues & Resolutions

Use this section to list of all major issues encountered and their resolution, if you'd like.