/mini-apps-1

A collection of JavaScript mini-apps, built with software best practices in mind.

Primary LanguageJavaScript

Mini Apps 1 Sprint

This README lists specs completed for each mini application, created with software development best practices in mind.

Technologies Used

Node, Express, React, ReactDOM, Bcrypt, Material UI, MongoDB, Mongoose, Ava, React Testing Library, Babel, Webpack, Styled-Components

Table of Contents

Challenge 1: Tic Tac Toe

  • BMR

  • Advanced Content

  • Refactor to use one event handler for all clicks on game board

  • Keep track of the winner from the last round and allow the winner (X or O) to make the first move on the next round of gameplay.

  • Keep a tally of the number of times X vs. O won a game. Refreshing the page should reset the tally.

  • Let each player (X vs. O) enter their name. Display this name next to the player's symbol (X vs. O).

  • If not already done, refactor your app so that all game state is self-contained in one object or module.

  • If not already done, refactor all your presentation code so that it lives in one module or object.

  • If not already done, refactor all code related to user input so that this code lives in one module or object.

  • Add a little CSS styling to make your game look more visually presentable.

  • If not already done, move your CSS into an external style sheet.

  • Add a twist to the game: after each move, rotate the board 90 degrees and apply gravity to the played squares, so they stack against the bottom of the board. Add a UI element to toggle this behavior (on/off) at the start of each game.

  • Serve the game and its assets from an express server.

  • Nightmare Mode

  • Use one more ES6 class for managing state, move it into its own file and instantiate an instance of this class for each round of gameplay.

  • Use one more ES6 class for managing presentation logic, move it into its own file and instantiate an instance of this class for each round of gameplay.

  • Use one more ES6 class for managing user input, move it into its own file and instantiate an instance of this class for each round of gameplay.

  • Refactor your app to not use any global variables, except for the classes created in the previous steps.

  • Refactor your app to not make use of any closure variables. All functions should be pure functions, meaning all their dependencies are supplied as inputs.

  • If you used a table for your game board, refactor to use divs instead. CSS will be necessary to align your elements correctly. If not already done so, refactor to use flex-box layout management.

  • Refreshing or reloading the page should not reset the scoring tally. Add a button to explicitly reset the tally.

  • Move the Game Logic to the server and build an API to power the UI.

Challenge 2: CSV Report Generator

  • BMR

  • Advanced Content

  • Add a field to the CSV report that contains a unique identifier (an auto-incrementing integer is fine) for each row of the CSV report.

  • Add another field to the CSV report that specifies the ID of the parent record. For top-level objects in the JSON, this field will be empty. For any child objects in the JSON hierarchy, this field will refer to the unique identifier in the prior step.

  • Add a form field that allows the user to enter a string, which, when present will filter (remove from the CSV report) any records that contain that string.

  • Adjust the generation of unique identifiers such that they remain consecutive (no gaps) even after filtering. Ensure that ID references from the child rows to their respective parents are still correct. If a record is filtered that has children, then all children should also be removed.

  • Allow some fields to be optional; i.e. some items in the JSON data might have fewer attributes. Collate attributes across all items you encounter and where missing, leave those fields blank in final CSV report.

  • Allow the children property to be optional. When omitted it means there are no children.

  • Format the CSV report that is received from the server and make it look more readable. (Interpreted as: add newlines)

  • If not already done, reset the form after each submission but leave the last CSV report on the page.

  • Allow the user to submit the JSON data using either a file picker/upload or textarea and use AJAX to serialize the form and submit the data to the server.

  • Refactor to using fetch instead of AJAX (fetch is the modern approach to server communication).

  • Nightmare Mode

  • Store each conversion in a database (suggestion: MongoDB)

  • Create a page that shows historical conversions and page that lets you view any single conversion. Render all pages using server-side rendering techniques. Be sure to include some navigation. (Half done, historical conversions on main page)

  • Refactor to use ES6 classes on the server and client. Transpile using babel. Add a build script to your package.json (Half done, ES6 on client)

  • Add support for drag and drop of JSON files

Challenge 3: Multistep Checkout Experience

  • BMR

  • Advanced Content

  • Don't allow the user to proceed until all the required fields are filled in. Address line 2 should be optional. Be sure to display appropriate error messages to the user, so they know why they are not allowed to proceed.

  • Validate the form fields. Don't allow the user to proceed to the next step and do not save the data until the fields are valid. Validation means that you must prevent the user from entering haha as the email address -- the email address have a valid data-shape. You'll have to decide which fields deserve validation and which do not. Be sure to display appropriate error messages to the user, so they know why they are not allowed to proceed.

  • If the window is closed and reopened, the checkout process should continue at the same step the user was on when the window was closed (it's ok if the fields on the "current" step are blank when the window is reopened). The app should continue to put the remaining data into the same record it was using before the window was closed. Once Purchase is clicked, it should not be possible to continue.

  • Allow the user to move back and forward through the checkout process.

  • When the user reaches the confirmation page, let the user edit any prior step. After editing fields in that step, the user should be returned to the confirmation page.

  • Write tests and use Nightwatch.js to confirm your entire checkout flow is working correctly.

  • Nightmare Mode

  • Refactor to use Redux to store your state.

  • If the window is closed and reopened, restore the form field values that were present when the user closed the window.

  • Integrate with Google Maps API, adding an address search to verify the ship to address.

  • Test your app (either by hand or via automated tests) using different browsers. Fix any issues that arise.

Challenge 4: Connect Four

  • BMR

  • Advanced Content

  • Add some routes to your server to save the result of each game.

  • Add a database using MongoDB, MySQL, or Postgres to store your scores so they are not lost when the server restarts (such as reloading by nodemon). You must use a different database technology than you used in Challenge 3.

  • Add a scoreboard page that fetches the last 30 game results from the server.

  • Add a button to restart the game.

  • Keep track of the winner from the last round and allow the winner (Red or Black) to make the first move on the next round of gameplay.

  • Keep a tally of the number of times Red vs. Black won a game. Refreshing the page should reset the tally.

  • Let each player (Red vs. Black) enter their name. Display this name next to the player's symbol (Red vs. Black). Save the user's name along with the game results to the server.

  • If not already done, refactor your app so that all game state is self-contained in one object or module. It is ok for this module to live in the same app.js file as the rest of your code. This will simplify your testing. Add more tests if needed.

  • If not done, apply CSS styling to make your game look more realistic. Use an external style sheet.

  • Nightmare Mode

  • Add a twist to the game: after each move, rotate the board 90 degrees and apply gravity to the played squares, so they stack against the bottom of the board. Add a UI element to toggle this behavior (on/off) at the start of each game.

  • Manage all your game state using a Flux pattern such as Redux.

  • If you used a table for your game board, refactor to use divs instead. CSS will be necessary to align your elements correctly. If not already done so, refactor to use flex-box layout management.

  • Refreshing or reloading the page should not reset the scoring tally. Add a button to explicitly reset the tally.

  • Add pagination to your scoreboard.

  • Deploy your app to Heroku.

Challenge 5: Checkers

  • BMR

  • Advanced Content

  • Allow players to be kinged and jump backwards too.

  • Add support for multiple consecutive jumps in either direction.

  • Implement all the nuanced rules for deciding on a winner or tie.

  • Add more Mocha and write tests to verify your rules are correct.

  • Separate your React components into their own files and configure webpack-dev to load those components into your client.

  • If not already done, use flex-box styling.

  • Nightmare Mode

  • Make a single player version of the game, where you play against the computer.

Challenge 6: Battleship

  • BMR + Advanced + NM

  • Build the UI using ReactJS

  • Serve the app from an Express server

  • Keep user's high scores in a database and have a leaderboard

  • Implement the game logic (for any single game) in the React client

  • Implement the overall game management logic on the server

  • Track progress on a game and allow it to be restarted later

  • Use ES6 and deliver everything to the front-end using Webpack

  • Deploy to Heroku (use Webpack-dev for development and Webpack for your Heroku deployment)

  • BONUS: support multiple simultaneous gameplays