Giter VIP home page Giter VIP logo

dev-mt-in's Introduction

Dev-mt-in

A note to students and employers

This is an Intern Project. What that means is that it is structure to look like what an intern might receive on the job. You will find in this document:

  • Design files of what the project should look like
  • Requirements, separated by day, of what the project should be able to do.

That is all. You will receive no instructions.

Your mentors have been asked to provide only minimal guidance. They can point you in the right direction, but cannot help you code. Similar to how an intern might receive guidance. This project is a chance for you to combine and showcase the skills you've learned so far.

With this guidance only structure we believe this project will showcase what you can do as an individual at this point of the program. Because of this we feel this project will be worth putting in your portfolio.

Good luck and work hard!

Sincerely,

Jeremy Robertson

Director, Web @ DevMountain

Application Design

These are located in the images folder in this project.

Application Design Color Palette Fonts Text Styles

Day 1:

Bottom Nav

  • Navigation is controlled at the bottom of the screen
  • User can navigate between View Friends Find Friends and Update Profile
  • Currently focused 'page' is underlined

Entry View

  • Entry view is seen when the user first enters the application
  • User is prompted to add data when the first enter the application
  • User can add Full-name, tagline, bio, and profile pic URL
  • User can save changes
  • After saving changes user is taken to the Landing Page
  • Entry View looks like provided screen shots

Landing Page

  • User sees their name
  • User sees their tagline
  • User sees their bio

Update Profile

  • User can change their fullname, tagline, profile pic, and bio

Day 2:

Use two services for this day. One to track people and one to track friends. Use local storage to keep track of the data.

Friends View

  • User can search for existing friends
    • Friends list updates based on search criteria
  • Hovering over a friend displays the friend name and View Profile as seen in the design.
  • User can select a friend by hovering then selecting View Profile
    • Page navigates to friend profile View when View Profile is clicked

Friend Profile View

  • User can view friend: name, tagline, bio, and profile image
  • User can navigate using the back button back to friends view
  • Add Friend Button
    • Says Add Friend if person is not your friend already
      • Adds that person to your friend list
    • Says Remove Friend if person is your friend
      • Removes that person to your friend list

Find Friends View

  • User can search people (not friends) by name
  • Hovering over a person displays the person name and View Profile as seen in the design.
  • User can select a person by hovering then selecting View Profile
    • Page navigates to friend profile View when View Profile is clicked

Day 3

There are no new visuals and pages to add, but currently all our data is stored locally. Use the following to POST, GET, PUT, and DELETE user profiles and friends:

API Urls

Base Url: http://connections.devmounta.in/

/api/profiles - POST

/api/profiles/:id - GET, DELETE, PUT

/api/profiles?name=Bob - GET

'/api/profiles/:userid/friends/:friendId' - DELETE, PUT

'/api/friends/:userId' - GET

API Data structure

All profiles are stored with this structure that you must match when saving:

{
    name: ,
    tagline: ,
    bio: ,
    profileUrl: ,
    friends: [friendId]
}

Day 4 - Black Diamond

This is a 'challenge' item. To push above and beyond. It is not included in the design specs.

  • Add the ability to browse through a friends friends and add them to your friends.

'/api/friends-friends/:friendId' - GET

dev-mt-in's People

Contributors

bencallis1 avatar brackcarmony avatar dougalderman avatar jrobber avatar r-walsh avatar zacanger avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.