Giter VIP home page Giter VIP logo

test-fullstack's Introduction

Fullstack

Context

Build a Hacker News like App but for lightning talk polling.

A lightning talk is a very short presentation lasting only a few minutes, given at a conference or a meetup etc.

Polling is often needed for the organizers to understand what is more interesting, or for people to decide what should go on stage.

Requirements

User Stories

  1. When a user opens the page, he/she should see a list of lighting talks submitted by the users, ordered by rating (poll amount).
  2. If there's no lighting talk yet, there should be some description and some text to encourage the users to submit their own talks.
  3. For each of the talks in the list, the user could vote it by clicking a button.
  4. After voting it, the user should see an updated version of the list, eg. with new talks and new sorting order etc.
  5. The users should be able to submit new lighting talks anytime. The required information is the title and description, while the system should also save the submit time and user.
  6. After submitting a topic, the user should see an updated version of the list.

Functionality

  • The frontend part should be a single page application rendered in the frontend and load data from an API (not rendered from backend).
  • If RESTful APIs, they should follow typical RESTful API design pattern.
  • Provide proper unit test.

Tech stack

  • Use React for the frontend.
  • Do not use any scaffolding tool such as create-react-app, or any CSS framework, but try to use some JS libs such as react-router, and packing tools such as Webpack or Parcel etc.
  • Prefer TypeScript related backend frameworks. Use any DB for storing the data, or if you prefer, in-memory DBs could just work.

Advanced requirements

These are used for some further challenges. You can safely skip them if you are not asked to do any, but feel free to try out.

  • Make it short and expressive, don't spend too much time just give it your best shot in a few hours.
  • Make it aesthetically pleasant (not complex).
  • Prototype / explain in text for: form validation, error handling strategy, auth, logging strategies.
  • Really understand your tools, justify your choice of tech.
  • Professional workflow.

test-fullstack's People

Contributors

b-sirius avatar flyingant avatar fraserxu avatar makara avatar rankun203 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

test-fullstack's Issues

OPT: short polling cache

front-end use fetch method to exchange with back-end.

request from postman can be cached 304
but request from navigator always 200. (Etag and If-None-match)

see detail in attachment

image
image

Proposal: a new type of interview work sample tests

One of the issues with current work sample test is that it takes time and hard to demonstrate a programmer's ability, a few cases where it's hard to evaluate:

  • A candidate did a very complete project, but he took more than a week
  • Another candidate did a very simple project, spent 1-3 hours, but the implementation is too simple, almost like a rip off from a tutorial for beginners.
  • A candidate didn't have enough time to go through test description and missed key requirements

We wanna re-emphasis on the importance of a few aspects and probably extending our company's core values here, and simplify the test:

  • Coding style (covered)
  • Communication and Commitment (covered)
  • Professional workflow (partially covered)
  • Knowledge
  • Logic
  • For seniors, either aesthetic or deep tech skills (partially covered)

Task for ChopperLee2011

Task

Build a simple application to do oauth with Github api, use the token to load repos and issues from Github and display it in the client.

Mockup

mock

Requirement

  1. [Login page] The user could use Github to do oauth(a "login with Github" button on the login page);
    • router /login
    • use express/koa in the backend to do oauth with Github and save a new user in the database(couchdb/mongodb/redis);
  2. [Repos list page] After user login success, go to the repo list page;
    • router /repos
    • use the access_token to get the list of repos from Github(this could be done from the back-end or you can use the token in the client to get the repo list), and then display them in the /repos page;
  3. [Issues list page] After User click the repo name, go to /repos/repo/:reponame page, get the list of issues;
    • router /repo/:repoName
    • user could see all the issues from the repo
  4. [Issue detail page] User could click the issue name and see the detail of the issues;
    • router /repo/:repoName/:issueNumber
    • display the issue title, and issue body(render markdown content to html)

Goal

  • Knowledge with Oauth
  • Use 3rd party API
  • Github workflow
  • "MEAN" stack. But I would be happy to see new way to do it, like couchdb + koa + reactjs + nodejs Of course, you can still use the real MEAN stack.

If you have any question, please don't hesitate to ask me here.

Development Questions from Kun

Hi everyone, Kun here,

So I’ve just started working on this test project today and had a few questions, any input would be greatly appreciated :)

  • 1. Feature: Since users will need to login, but the User Stories didn't mention such features, also the requirements mentioned to include OAuth, so I'm thinking about including Github as a login provider. A user will see a login screen with only one button says [Sign In With Github], he(she) clicks on it, and finishs the OAuth process, boom, it will take him(her) to the talk listing page. Is that OK?

    • Anonymous: view list of talks, sign in.
    • Logged in users: create new talks, vote for a lightning talk, sign out.
  • 2. Feature: Can a user vote for more than one talks?

  • 3. Feature: Any commenting on lightning talks related feature required?

  • 4. Any dedicated search / filter feature is required? The “filter feature” mentioned in the document I’m gonna make it so when users click on the creator of a talk, talk listing will be filtered just like Hacker News does.

  • 5. Question:

    Use a NoSQL DB and build a filter feature that can filter records with some of the attributes such as username

    I'm not quite sure if I get it correctly, so if I don't use MongoDB's query language and that's possibly the only language Mongo supports, then I'll need to use some other databases right? Or maybe I should implement a custom indexing strategy and store everything in Redis? Or, just save it in memory and create indexes in memory?

  • 6. Question: Just to make sure, since using a packaging tool like Parcel is pretty easy as well, saves a lot of time configuring Webpack and Babel, I'm gonna just use Parcel with TypeScript, if you guys have any preference please let me know :)

Current requirements I've been working on:

Since two descriptions are slightly different, if I have any more questions I'll put it in this issue.

Thanks for the effort.

Questions for loopback from MaYi

Hi there,

Hope you kindly guys could help me to discuss some the questions about loopback.

For Nodejs and loopback, so far I had read the documentation and realized the basic concept and how it works. Now I am trying to build a backend server based on loopback but still got some confuses. Then wish you can lend me a hand to make me understand easier. Thanks so much!

  1. Is that possible to override or rewrite the predefine method without change the path? (e.g. I have a Publisher model which contain username and password properties. Before create a new Publisher instance I would like to check the username if unique. But as I know the predefine method will directly create a instance after post a request.)
  2. Could I disable all the predefine remote methods but only expose customized remote method? (e.g. In some of my models, for security reasons or simpliy the code I would like to disbale all the predefine mehod and only expose a few customized remote method. I know I could set the model's public property to false but it will lead to all APIs are not available to viste. And the disableRemoteMethod method looks won't work fine when models have relations.)
  3. If there's better way to handle the model's relations? (e.g. I got two models called Publisher and Talk, The Publisher hasMany Talk and the foreign key called publisherId. When I try to create a new Talk, I need check the publisherId (ensure the publisher is existed) first before saved the instance. And then I am thinking about that what if the Talk have other foreign keys? YES! The callback hell come out!)
  4. Any ideas to reformat the response to client? (e.g. When I query the Talk model data and it responsed {title:'ttt', description: 'dddd'}, I would like to add extra property which not belong to theTalk and the response shall look like {title:'ttt', description: 'dddd', voteCount: '1234'}. )
  5. Any suggestions on organizing the code structure?(e.g. like controller, service folder, In my opinion it's not wisely to put all the code in the model.)

Still thanks for taking your precious time to read. I am really grateful.

MaYi

Mayi's issues for development

Hi, I am Liu Cheng (aka 'MaYi').

After had a nice talk at WiredCraft office this Monday, I was assigned to build this app with React and Loopback, Redis.

Well I'm really new on nodejs, loopback and redis and start to study everything from Tuesday then I am stuck when developing the loopback-based back-end server today and hope you guys could help to provide some advices to me.

  1. is there any best way to debug the code? (debugger?)
  2. any suggested IDE for loopback?

Also in the past two days, I spent a few hours and finished the code for front-end web application and built a very simple java-based server for testing. Vist the link http://staging.flyingant.me/i/home to check out.(^_^). Later I will use the loopback-based server instead my test server.
623e9ef0-eea3-47de-ad55-d8f8f2f531e1

Thanks

Some questions before starting

  1. User login - Should I support user sign up?
    If supporting sign up should I support email verification?
    If not supporting sign up, should I support a list of users or anybody can just login?

  2. Should I support comments threading ?
    comment a
    - b reply to a
    -- c reply to b
    - d reply to a

  3. Should I support page refreshing - when watching the lightning talks if some other users are currently ranking talks , should my page refresh accordingly?

  4. Should the lightning talk format be as following?
    Number, vote up , title
    X point by Username followed by time
    example :

  1. Automated API Testing
    1 point by antfie 49 minutes ago | hide | past | web | discuss
  1. Can a user vote several times for the same lightning talk?

  2. Should the user see his lightning talks in front of the other talks?

  3. When a user hits the lightning talk should he see all the users who liked that talk?

  4. Can the user upload a link to the lightning talk page?

About the required features

Hi, I am designing this small project. I am not sure about the exactly required features. As I saw in the other issue #7, the requirement is quite open, thus I decided to write my ideas down here and expect your feedback if you found anything wrong!

Backend

Here's what I am going to code for the backend API (and I was asked to use express)
User

  • Register / Login / Logout

Talk (Protected APIs - Login required)

  • Get a list of talks (title, description, postedBy, rating)
  • Create a new talk by a logged-in user
  • Rate a specific talk (+1 or -1). One user cannot rate the same talk multiple times.

The features I am not going to code.

  1. Delete user/talk
  2. Pagination
  3. comments for talks

Frontend

I am going to use AngularJS 1 & bootstrap for the frontend, to quickly build a prototype UI layout.

Please comment if you found anything inappropriate. Thanks!

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.