Giter VIP home page Giter VIP logo

gitsub-e14-team-2-electric-boogaloo's Introduction

GITSUB

Overview

To make a GitHub clone site

Wireframes

  1. Main Project
  2. Additional Organizations Page

Deployed Site

https://team2-gitsub.netlify.app/ Netlify Status

Project Board

Project Board

Description of the user

For user to see various aspects of their GitSub profile including:

  • Overview Page
  • Repositories Page
  • Projects Page
  • Packages Page
  • Organizations Page

List of features

  1. Available on All Pages
  • Profile Card
  • Nav Bar
  • Footer
  1. Overview Page
  • Profile card, which appears on every page.
  • About Me section that gives an overview of the user, contact information, and an avatar specific to her.
  • Container for pinned repos, with delete functionality
  • Form for creating new pins or highlights.
  1. Repositories Page
  • List of repositories that have been created.
  • Two starting starting repositories that include information for the user.
  • A form that allows the user to create new repositories.
  1. Projects Page
  • Includes cards with 5 projects which contain the project name, description and date
  • A Form to add a new project
  • The name field displays a message if the field is not filled
  • Projects can be sorted from newest to oldest
  • the form resets after the button is clicked
  1. Packages Page
  • A flexbox row with Profile card and header containing titles/logos for Packages
  • A flexbox column containg the package cards and form to create new packages
  • Ability to create and delete packages to be pushed into array
  • Reponsive design for mobile use
  1. Organizations Page
  • One flexbox div for responsive design, which holds two columns, the second column has multiple rows
  • First column for Profile Card
  • Second column, first row for Oranizations cards
  • Second column, second row for a Form
  • A New Organizations button which toggles Form's display between none and block
  • A form which accepts a required Org name, and populates a new Org card upon submission
  • Ability to Leave organizations, and thus delete the card
  • Showcases on each card the top favorited repos from that Org (complex data)

Screenshots of your project

  • Overview Page m0nica Final About Me
  • Repositories Page Repos Page
  • Projects Page gitsub-1 gitsub-2 gitsub-3 gitsub-4
  • Packages Page Packages Top Packages Bottom
  • Organizations Page

List of contributors and links to their GH profiles

@Gabrielle-Tobermann @GonzalesMatthew @hmparsons-sde @HunterJuneau @seancrossettie

Link to Loom video walkthrough of your app

gitsub-e14-team-2-electric-boogaloo's People

Contributors

hmparsons-sde avatar gabrielle-tobermann avatar gonzalesmatthew avatar hunterjuneau avatar seancrossettie avatar github-classroom[bot] avatar

Watchers

James Cloos avatar avatar avatar

Forkers

alanbosco003 gabrielle-tobermann gonzalesmatthew

gitsub-e14-team-2-electric-boogaloo's Issues

Need to fix error

Getting the following error: Uncaught TypeError: Cannot set property 'innerHTML' of null on home page.

  • when trying to print projects
  • when trying to print organizations

Every Page Has A JS Loop

  1. EVERY SINGLE PAGE must include a JS loop of some kind
  • Holly
  • Sean
  • Hunter
  • Gabrielle
  • Matthew
  1. Team can only have 1 JS file - main.js
  2. All your JS should be written in functions. Wherever possible reuse functions.
  • Holly
  • Sean
  • Hunter
  • Gabrielle
  • Matthew

Repos Data

User Story

As a user, I should see some starting repos on the repos page.

Acceptance Criteria

WHEN the user visits the repos page
THEN they see some existing repos

Dependencies

Loom Videos

  • Create Loom Video per Page (responsibility of the owner)
  • Holly
  • Hunter
  • Sean
  • Gabby
  • Matthew

Edit Repos

User Story

As a user, I should be able to edit a repo to change any of its information.

Acceptance Criteria

WHEN the user visits the repos page
THEN they can edit a repo

Dependencies

STRETCH - Search Repos

User Story

As a user, I should be able to search through the repos by name.

Acceptance Criteria

WHEN the user visits the repos page
THEN they can search through the repos

Dependencies

Dev Notes

Dynamic Buttons Somewhere in Project

  • somewhere in your project there should be some dynamically created buttons (NOT IN THE HTML...RENDERED USING JAVASCRIPT) - clicking each button should perform some sort of action

Create Data Objects for Team

Create data objects that you can use for your website.

  • Do not duplicate objects or arrays
  • If multiple team members need the same data, create one data source for everyone to use
    List of Objects Everyone Needs
  • Array of repos
  • Profile panel (picture, etc.)
  • Event listeners for both header and footer
  • array for Organizations
  • Array for projects and packages
  • Array for projects and packages need to start off as empty

Need to change footer

The footer is always visible no matter where you are on the page. I believe it should only visible at the very bottom of the page.

Repo Form

User Story

As a user, I should be able to add new repos using a form.

Acceptance Criteria

WHEN the user visits the repos page
THEN they can create a new repo using a form

Dependencies

Dev Notes

Use a Bootstrap form.

Fix Package Page Styling

  • Fix Icon Images for Existing Packages
  • Fix Images for newly created packages
  • Fix Foot so that it is static
  • Reformat the Table for cards to sit on under the nav bar in the center of the page
  • Space out cards so they aren't all touching
  • Fix form background color

Include A Complex Data Structure Somewhere in Project

  • At least 1 of your pages should use a more complex data structure. This means that one of your arrays should have an array inside each object. For example: your repos could have an array of objects called users and each of your users could have an array called social media in it. You then would have to figure out how to display all the users and their social media in the domString

STRETCH - Star Repos

User Story

As a user, I should be able to star repos, which will make them appear at the top of the list of repos.

Acceptance Criteria

WHEN the user visits the repos page
THEN they can star repos
AND star repos appear at the top of the list of repos

Dependencies

Dev Notes

Add starred: true/false key-value pair to repos data

Repos Page View

User Story

As a user, I should be able to view all of my repos.

Acceptance Criteria

WHEN the user visits the repos page
THEN they see all of their repos

Dependencies

Dev Notes

Loop through an array of repos.

One Form Per Page

Each page in your project should have at least 1 form. Submitting that form via a button click should do something.

  • Holly
  • Sean
  • Gabrielle
  • Hunter
  • Matthew

Setup

User Story

As a user, I should be able to access the app.

Acceptance Criteria

WHEN the user visits the app
THEN they are on the index.html with working CSS and JS

Dev Notes

  • boiler plate
  • link CSS and JS

Navbar

User Story

Nav Bar should appear at the top of every page

Acceptance Criteria

WHEN the user visits any page
THEN they will see a bootstrap navbar
AND have links to every page

Dependencies

Dev Notes

Use a Bootstrap navbar.

Index.HTML styling fixes

Currently, the form & pin cards print at the bottom of the page. I have tried various manipulations in Bootstrap and CSS, but cannot figure out why my content won't budge.

Goals:

  1. MVP: Get cards & form aligned with the profile card, under the nav bar & above the footer.
  2. IDEALLY: Have the cards row stacked on top of the form when they print.
  3. STRETCH: Move the customize button to mirror the wireframe. I would also shrink it.

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.