Skip to content

Latest commit

 

History

History
116 lines (79 loc) · 3.7 KB

README.md

File metadata and controls

116 lines (79 loc) · 3.7 KB
Raw

GitNotes!

Why Gists are so popular? In open source community you want to create content & share it with people. With Gists you can create public content, code fragment, configuration files & files. You can share it with people, search it on Github, save it to your profile & much more. In this assignment you are going to provide a better solution for Managing Gists

Screens Flow

The Landing Page

  • As you open the app, you see landing screen with a list of Gists in it.
  • List will contain paginated public gists from github.
  • Page will have two layouts to view the gists
    • List Layout List view
    • Grid Layout Grid View
  • Use the toggle to Switch Between the Layouts
  • Page will also contain a header with
    • Login menu for login with github
    • Search for searching a Gist using ID 62457649-b28ae280-b794-11e9-92cd-3d368a28568a

Login Page

  • Once you click login menu, it will allow the user to login using github.
    • Maintain user session
  • Once logged in, header will contain profile menu with picture of user. Notebook – 7

Gist Page

  • Once you click any Gist from landing page, it will redirect to Gist page

  • For a Public Gist page will

    • Contain the information of the Gist with owner's informations
    • Allow user to give star
    • Allow user to fork that Gist

    Notebook

  • For User's Gist user will be able to

    • Edit Gist
    • Remove Gist

    Notebook – 2

Profile Menu/Page

  • Profile menu will have
    • Create Submenu for creating a Gist
    • A gist can have multiple files. The Add File button will add a single file to your gist when clicked on.
    • Once all the files are added, clicking on Create Gist will create your new gist with the added files Notebook – 4
    • Logout Submenu for Singing out of Github
    • User Profile Submenu for User Profile & user's Gists

Notebook – 3

Search

  • Search Bar will allow
    • Searching a Gist using ID
    • Show Results of Query using Gist Page
    • Search Results in List View Notebook – 5
    • Search Results in Grid View Notebook – 6

Tech Stack

  • React
  • Redux
  • NodeJS
  • Types using Typescript or Flow

Rest of the tools are your own choice. You can use Create React App to get started.

Concept Coverage

HTML/CSS

  • Use HTML5 semantic elements
  • Use CSS3 with
    • Flexbox
    • Grid Layout

React JS

  • ES6
  • Function Components for Parts Responsible for Markup & Rendering
  • Class Components for Parts with Business Logic
  • Redux Integration for
    • State Management
    • APIs Response
  • Higher Order Functions/Components for atleast two components
  • React Hooks with Function Components, if required

NodeJS

  • API Designing
  • API Routes
  • Server Mounting Scripts/Configurations

Coding Guidelines

Integrate eslint with code guidelines from airbnb

Submission

The result of this assignment should be a project source code, uploaded at GitHub. Please forward GitHub repo link to your mentor.