learn-javascript-courses/rejection

You gotta lose to win. A portfolio project to highlight React skills.

Rejection

A portfolio project for professional developers to highlight skills with modern tech stacks like React, Redux, Serverless, etc. EricElliottJS.com.

Want to work as a team?

You gotta lose to win.

Train yourself to:

• Get a raise
• Sell more
• Develop more business
• Negotiate better deals

The game has one rule:

You must be rejected by a human being at least once per day.

Ask for things outside your comfort zone, and you'll find yourself winning a lot more.

Win = 1 point. Rejection = 10 points.

How long can you make your rejection streak last?

Basic Level

Build a UI that lets you keep track of your score. Include a text input for the ask, who you asked, and two buttons: "Accepted" or "Rejected". For asynchronous requests such as emails or messages, record the score at the time you get the answer, not at the time you ask.

Use HTML+CSS and store a record of the data in localStorage.

Your data structure can be a simple array of ask objects:

interface Question {
  id: String,          // id of the question so you can get/edit/remove by id
  timestamp: Number,   // output from Date.now()
  question: String,    // the ask
  askee: String,       // person asked
  status: String       // 'Accepted', 'Rejected', 'Unanswered'
}

You can calculate everything else you need to know by reducing over the list of asks.

It may be useful to display a running tally of the user's current score. Just remember that the current day's subtotal needs to be recalculated each time an ask is accepted or rejected, so it will be useful to keep the list in an array that you can reduce with each new ask added by the user.

Mid level

Add an API to store data using a web service and database. Track multiple users (which means you'll need to add user authentication).

Try Firebase for data storage.

Extra credit

• Add mobile apps by turning your web app into a Progressive Web Application.

To Implement:

1. Fork this repo
2. Implement your solution.
3. Open an issue with a link to your fork.

To get credit, you must open an issue with a link to your fork.

rejection's Issues

Challenge completed level: basic

https://github.com/CCole/rejection

Challenge completed: Basic

https://github.com/warrenv/rejection

This is live at: http://rejection.straydog.to/

Mid level completed.

Here is the link to the app.

https://github.com/janhesters/rejection-game

It's a private repo, but I invited you both as collaborators.

Also, if you happen to download the repo, you can search for NOTEs in the code. I used NOTE every time I wasn't sure / had a question 😊

Things that could be improved (from the top of my head):

• Design & UI (duh).
• Offline experience. (If I hadn't used Redux Saga, but AWS Amplify, this would be just gifted to you for free by Amplify.)
• E2E tests with Cypress.

Things I'm working on:

• CI / CD + automatic production deploy.

Challenge completed: Basic level

My fork: https://github.com/TeraMind244/rejection

Rejection App

Rejection App is currently live at this github pages link. GitHub Repo.

Also, here is a screenshot of the Lighthouse Performance test was run before creating this issue.

Mid Level Completed!

Finish Mid Level Challenge

• Rejection App Demo
• Github Repo

Stack

1. Next.js
2. React
3. Redux
4. Redux-Saga
5. Firebase
6. TDD (Tape, Cheerio, Nightwatch)

Architecture/Pattern

1. Ducks pattern
2. 10 Tips for Better Redux Architecture
3. Feature-based file structures
4. Pure Component
5. Functional setState

Nightwatch Demo

Special thanks to

@ericelliott
@JScheerleader
@thoragio

Basic Level: Completed

https://github.com/askeroff/rejection
https://askeroff.github.io/rejection/

I am not really comfortable with the result. I used TDD for the first time and I'm not sure how correct it is. At some point, I thought, I should've used React or something. Maybe if I'll decide to go on and advance this app, I will.
For now, will appreciate any feedback.

Challenge completed level: Mid

Frontend: https://github.com/mkeeneth/rejection
backend: https://github.com/mkeeneth/rejection-server
Deployed: https://rejection.netlify.com/

Thanks Again!

Challenge completed level: basic

Code: https://github.com/mkeeneth/rejection
Deployed: https://rejection.herokuapp.com/

Thanks!

Basic Level completed!

Finish basic level using Next.js + React + Redux with TDD.

• Rejection App Demo
• Github Repo

Architecture

1. ducks pattern

Colocate constants, action creators, and selectors with reducer.

2. 10 Tips for Better Redux Architecture

Use TDD: Write Tests First

• Direct reducer tests: Test that the reducer produces the expected default state.
• Action creator tests: Test each action creator by applying the reducer to the action using some predetermined state as a starting point.
• Selector tests: Tests the selectors to ensure that all expected properties are there, including computed properties with expected values.

3. Feature-based file structures

• How to use Redux on highly scalable javascript applications?

Questions

1. Constants naming principle

Duck pattern say that MUST have action types in the form npm-module-or-app/reducer/ACTION_TYPE

But I notice you use const ADD_CHAT = 'CHAT::ADD_CHAT'

Which pattern should I follow?

2. Where is the describe come from?

describe('chatReducer()', ({ test }) => {
  test('with no arguments', ({ same, end }) => {
    const msg = 'should return correct default state';

    const actual = reducer();
    const expected = createState();

    same(actual, expected, msg);
    end();
  });
});

3. Is this a correct way to load data from localStorage?

componentDidMount() {
  const { dispatch } = this.props;
  const serializedState = localStorage.getItem('rejection/state');
  const state = JSON.parse(serializedState) || {};
  if (state.asks) state.asks.map(ask => dispatch(addAsk(ask)));
}

mid level

https://rejection-torwzprasl.now.sh
https://github.com/ryanbas21/rejection
updated links. loads data on login 👍

Challenge completed level: basic

Hi Eric,

Here is my interpretation of the challenge Rejection Game challange.
https://github.com/ddaawwiidd/rejection

Any advices for rookie coder?

Cheers
Dawid

Challenge completed level: save/load state saga

https://github.com/webbower/rejection

Challenge completed level: basic/mid/advanced

Basic Challenge Completed

Code: https://github.com/thoragio/rejection
Demo: https://thoragio.github.io/rejection/

I enjoyed working on this project. What really stumped me though was what to write tests for. I had a nice boilerplate for testing all ready to go, but in the end I built it and never could see the path for TDD during it. :-(

Challenge completed level: basic

Hi @ericelliott,

Here it is a link to my fork
And the deployed version

The app:

• TDD, for the most part during development. Next level will be 100%
• Uses Tape for unit testing along with Cheerio
• Persists Asks data in localStorage
• Decouples state with Redux, uses Selectors and Sagas for effects.
• Uses Next and Now for deployment
• CSS: experiment with styled-jsx

Mid Level Challenge Completed

Code: https://github.com/thoragio/rejection2
Demo: https://rejection2-uozqvyieal.now.sh/

Working with Next.js and learning React along the way was already quite a challenge, so I did not create any unit tests for this one. Will do that in the next project.

Thanks for the suggestion to try out Next.js. I enjoyed working with it, and with React as well.

first crack at it...

here's a working implementation.. it's not too pretty, and it uses localStorage.

obviously this thing didn't need Redux, but I have to use a thing to really learn it.. and I'm learning Redux.

In case the UI isn't clear.. you can click the questions to change the "response"

https://github.com/codyloyd/loser

http://codyloyd.com/loser/

Challenge completed level: basic

link: https://github.com/ryanbas21/rejection
deployed: https://rejection-xzclhtmjho.now.sh/

Challenge completed level: basic

Code
Reject Counter

Challenge completed level: basic

site: https://rejection.manos.now.sh/
repo: https://github.com/mfountoulakis/rejection

This was a great exercise! You left a trail of easter eggs leading right to some really nice tips about testing the redux store.

I could have submitted this exercise a lot earlier if I hadn't run into issues with testing. Specifically, unit testing connected components. The short answer is: I don't know what I'm doing.

mapStateToProps seems to be clashing with the simulated state that I'm attempting to pass to my components as props. I suspect that there's an easy solution that I'm missing here, but I will continue to write tests in other areas in the meantime, along with general refactoring.

As always, questions/comments are welcome!

Challange completed: expert level

Code: https://github.com/sayansiva/rejection-app
Deployed: rejection-app-six.vercel.app

Challenge Completed: Basic Level

Basic Level: https://github.com/PennTx/rejection

Challenge completed: basic level

Hey, @ericelliott, thanks for creating this rejection challenge :)

I had a lot of fun with my first iteration of this project and can't wait to hear your advice on how I can improve it.

Source code: https://github.com/indiesquidge/rejection/tree/basic-level

Production site: http://austinwood.me/rejection/