<p>Find your next movie or create your watch list with this App. It include reviews, rating, actors and anything you need to know about the movie.</p><ul><li><p>This application will help users find their next movie to watch by showing helpful stats</p></li><li><p>Resource needed for the project is movie api, examples include Imdb, MovieDB etc.</p></li></ul><p></p><h2>User Stories</h2><ul><li><p>User can see all the latest movie on the front page</p></li><li><p>User scroll down to see all other movies according to release date</p></li><li><p>User can click on any of the movie to go to their own separate page</p></li><li><p>User can then see all about the movie ratings, about, actors present on each separate movie page</p></li></ul><p></p><h2>Bonus features</h2><ul><li><p>User can create an account</p></li><li><p>User can create their own watch list</p></li><li><p>User can review movies</p></li></ul><p></p><h2>Useful links and resources</h2><ul><li><p><a target="_blank" href="https://developers.themoviedb.org/3">MovieDB Api</a></p></li></ul><p></p><h2>Example projects</h2><ul><li><p><a target="_blank" href="http://phobic-heat.surge.sh/">Movie Database App w/ React</a></p></li><li><p><a target="_blank" href="https://api-cinema-10d15.firebaseapp.com/">Movie Browser App w/ React&amp;Redux&amp;Bootstrap</a></p></li></ul>

Find your next movie or create your watch list with this App. It include reviews, rating, actors and anything you need to know about the movie.

Movie Database App

<p>Whether your main sport is soccer, baseball, cricket, or competitive esports following the progress of your favorite team during tournaments is an activity enjoyed by many.</p><p>Tracking team progress is traditionally done using a horizontal tree diagram showing all of the initial matches on the left-hand side. At the end of each match the winner advances to the next round in the tournament along with the winner of the adjacent match. Columns in the diagram are used to represent each round and contain one-half of the teams in the adjacent column on the left and twice as many teams as the adjacent column to the right. The number of teams in each column decreases from left to right until the last round (column) contains the final winner in the tournament.</p><p>The Tournament Bracket Generator automates the process of creating this type of chart by drawing it in a browser window to relieve the user from having to draw it by hand.</p><p></p><h2>User Stories</h2><ul><li><p>User can enter the name of the tournament</p></li><li><p>User can enter the starting and ending dates of the tournament</p></li><li><p>User can enter the number of teams competing in the tournament</p></li><li><p>User can see a warning if either the starting or ending date is invalid</p></li><li><p>User can see a warning if an odd number of competing teams is entered</p></li></ul><p></p><h2>Bonus features</h2><ul><li><p>User can enter the competing team names for each match</p></li><li><p>User can enter the date for each match</p></li><li><p>User can enter the final score for each match</p></li><li><p>User can expect that this data will persist across sessions</p></li></ul><p></p><h2>Useful links and resources</h2><ul><li><p><a target="_blank" href="https://en.wikipedia.org/wiki/Bracket_(tournament)">Bracket (tournament)</a></p></li></ul><p></p><h2>Example projects</h2><ul><li><p><a target="_blank" href="https://codepen.io/cbleslie/pen/ZOLLXg">Pure CSS &amp; DOM Sports Bracket</a></p></li><li><p><a target="_blank" href="https://codepen.io/MrCaseiro/pen/bxJpwV">Responsive Sports Bracket</a></p></li></ul>

A Tournament Bracket Generator is a tool to generate a tournament bracket and knockout schedule.

Tournament Bracket Generator

<p>The classic To-Do application where a user can write down all the things he wants to accomplish.</p><p></p><h2>User Stories</h2><ul><li><p>User can see an <code>input</code> field where he can type in a to-do item</p></li><li><p>By pressing enter (or a button), the User can submit the to-do item and can see that being added to a list of to-do's</p></li><li><p>User can mark a to-do as <code>completed</code></p></li><li><p>User can remove a to-do item by pressing on a button (or on the to-do item itself)</p></li></ul><p></p><h2>Bonus features</h2><ul><li><p>User can edit a to-do</p></li><li><p>User can see a list with all the completed to-do's</p></li><li><p>User can see a list with all the active to-do's</p></li><li><p>User can see the date when he created the to-do</p></li><li><p>When closing the browser window the to-do's will be stored and when the User returns, the data will be retrieved</p></li></ul><p></p><h2>Useful links and resources</h2><ul><li><p><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">localStorage</a></p></li></ul><p></p><h2>Example projects</h2><ul><li><p><a target="_blank" href="http://todomvc.com/examples/react/#/">Todo App built with React</a></p></li><li><p><a target="_blank" href="https://codepen.io/yesilfasulye/pen/eJIuF">To Do List on Codepen</a> by <a target="_blank" href="https://codepen.io/yesilfasulye/">Burak Kaya</a></p></li><li><p><a target="_blank" href="https://safdarjamal.github.io/todo-app/">Todo App in Plain JavaScript</a></p></li><li><p><a target="_blank" href="https://github.com/schadokar/go-to-do-app">Todo App in Golang</a></p></li></ul>

The classic To-Do application where a user can write down all the things he wants to accomplish.

To-Do App

<p>A weather app allows the user to look up weather information for a specific location. Usually information such as temperature (Celsius &amp; Fahrenheit), weather description, wind speed, daily and 5 day forecast is provided to the user. Building a weather application is a good beginner application that teaches you how to fetch data from an API and display it to the user.</p><h3>User Stories</h3><ul><li><p>Display an input field to search for a city.</p></li><li><p>Display weather information including:</p><ul><li><p>City and country name</p></li><li><p>Temperature (Celsius and Fahrenheit)</p></li><li><p>Weather description (sunny, rainy, windy etc...)</p></li></ul></li><li><p>Input field should have validation. For example, user should not be able to perform a search if the input field is empty!</p></li></ul><h3>Bonus Features</h3><ul><li><p>Display weather information for user's current location.</p></li><li><p>Display city location on a map (Google Maps, Mapbox).</p></li><li><p>Display 5 day forecast.</p></li><li><p>Save a city location to a favorites list.</p></li></ul><h2>Useful Links and Resources</h2><ul><li><p><a target="_blank" href="https://openweathermap.org/">Openweathermap API</a></p></li><li><p><a target="_blank" href="https://developers.google.com/maps">Google Maps API</a></p></li><li><p><a target="_blank" href="https://www.mapbox.com/">Mapbox API</a></p></li></ul><h5>Example Projects</h5><ul><li><p><a target="_blank" href="https://rickywid.github.io/weather-v2">Weather App</a></p></li><li><p><a href="https://esnz-reactweather.netlify.app/">react-weather-app</a></p></li></ul>

A weather app allows the user to look up weather information for a specific location

Weather App

<p>Generate passwords based on certain characteristics selected by the user.</p><h2>User Stories</h2><ul><li><p>User can select the length of the generated password</p></li><li><p>User can select one or multiple of the following: <em>Include uppercase letters</em>, <em>Include lowercase letters</em>, <em>Include numbers</em>, <em>Include symbols</em></p></li><li><p>By clicking the <em>Generate password</em> button, the user can see a password being generated</p></li><li><p>User can click a <em>Copy to clipboard</em> button which will save the password to the clipboard</p></li></ul><h2>Bonus features</h2><ul><li><p>User can see the password strength</p></li></ul><h2>Useful links and resources</h2><ul><li><p><a target="_blank" href="https://github.com/dropbox/zxcvbn">Password strength checked - zxcvbn</a></p></li></ul><h2>Example projects</h2><ul><li><p><a target="_blank" href="https://codepen.io/FlorinPop17/full/BaBePej">Password Generator by Florin Pop on Codepen</a></p></li><li><p><a target="_blank" href="https://passwordsgenerator.net">PasswordGenerator</a></p></li></ul>

Generate passwords based on certain characteristics selected by the user.

Password Generator

<p>Flashcards are a time tested technique used by students to review and test their knowledge on a particular subject.</p><p>This app is based on a knowledge base of questions and answers about a particular subject and randomly displays a card with the question and multiple answers. The objective is for the user to select the correct answer(s).</p><h2>User Stories</h2><ul><li><p>User can see a single card, randomly picked from the "deck" displayed at any point in time</p></li><li><p>User can see a question on the card and a list of four possible answers, each of which is identified by a letter.</p></li><li><p>User can select an answer by clicking on it</p></li><li><p>User can see an error displayed when the wrong answer is selected</p></li><li><p>User can see a congratulations message when the correct answer is selected.</p></li><li><p>User can click a 'Next Question' button to display the next flash card.</p></li></ul><h2>Additional Info for the Developer</h2><ul><li><p>For this app the knowledge base of questions and answers should be encoded in a JavaScript object.</p></li><li><p>The possible answers display on each card should be randomly chosen from other flashcards.</p></li></ul><h2>Bonus features</h2><ul><li><p>User can click a 'Results' button to display the tallies of correct and incorrect answers.</p></li><li><p>User can click a 'Reset' button to reset the tallies of correct and incorrect answers.</p></li><li><p>User can click a 'Shuffle' button to re-randomize the "deck"</p></li><li><p>User can click a 'More Info' button to flip the flash card to see additional information. For example, detailed information about the subject of the question on the front of the card.</p></li></ul><h2>Useful links and resources</h2><p><a target="_blank" href="https://developer.mozilla.org/en-US/">MDN</a></p><h2>Example projects</h2><p><a target="_blank" href="https://codepen.io/NinoLopezTech/pen/vJBMpZ">Vintage Multiplication Flash Cards</a></p>

Flashcards are a time tested technique used by students to review and test their knowledge on a particular subject.

Flashcards

<p>The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks - 5 minutes.</p><h2>User Stories</h2><ul><li><p>User can see a timer for 25 minutes - the <strong>working</strong> session</p></li><li><p>After the <strong>working</strong> session is over, the User can see a timer for 5 minutes - the <strong>break</strong> session</p></li><li><p>User can <em>start</em> / <em>pause</em>, <em>stop</em> and <em>reset</em> the timers</p></li></ul><h2>Bonus features</h2><ul><li><p>User can hear a sound playing when the timer hits <em>00:00</em> - denoting that the session has ended</p></li><li><p>User can change / customize the minutes in both sessions before starting</p></li><li><p>User can set a <strong>long break</strong> session of 10 minutes. This will be activated every 4th <strong>break</strong> session</p></li></ul><h2>Useful links and resources</h2><ul><li><p>More about the <a target="_blank" href="https://en.m.wikipedia.org/wiki/Pomodoro_Technique">Pomodoro Technique</a></p></li></ul><h2>Example projects</h2><ul><li><p><a target="_blank" href="https://codepen.io/JoeWeaver/pen/bLbbxK">Joe Weaver's example</a></p></li><li><p><a target="_blank" href="https://codepen.io/freeCodeCamp/full/XpKrrW">FreeCodeCamp Pomodoro Clock example</a></p></li><li><p><a target="_blank" href="https://github.com/amitmerchant1990/pomolectron">A desktop pomodoro app for menubar/tray.</a></p></li><li><p><a target="_blank" href="https://srd-pomodoro-timer.netlify.com/">Sheri Richardson's example</a></p></li></ul>

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s.

Pomodoro Clock

<p>An electronic calculator is typically a portable electronic device used to perform calculations, ranging from basic arithmetic to complex mathematics. In this problem you will create a calculator that supports basic arithmetic calculations on integers.</p><h2>Constraints</h2><p>Do not use the <code>eval()</code> function to execute calculations</p><h2>User Stories</h2><ul><li><p>User can see a display showing the current number entered or the result of the last operation.</p></li><li><p>User can see an entry pad containing the following buttons:</p><ul><li><p>Digits 0-9</p></li><li><p>Operations (addition, subtraction, multiplication, division)</p></li><li><p>Equal</p></li><li><p>AC</p></li></ul></li><li><p>User can click on an operation button to display the result of that operation on:</p><ul><li><p>the result of the preceding operation and the last number entered OR</p></li><li><p>the last two numbers entered OR</p></li><li><p>the last number entered</p></li></ul></li><li><p>User can click the 'AC' button to clear all internal work areas and to clear the display.</p></li><li><p>User can see 'ERR' if the user tries to divide by 0.</p></li></ul><h2>Bonus features</h2><ul><li><p>User can click a '+/-' button to change the sign of the number that is currently displayed.</p></li><li><p>User can see a decimal point ('.') button on the entry pad to that allows floating point numbers up to 3 places to be entered and operations to be carried out to the maximum number of decimal places entered for any one number.</p></li><li><p>Add a “backspace” button, so the user can undo if they click the wrong number.</p></li><li><p>Add keyboard support.</p></li></ul><h2>Useful links and resources</h2><ul><li><p><a target="_blank" href="https://en.wikipedia.org/wiki/Calculator">Calculator (Wikipedia)</a></p></li><li><p><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#arithmetic_operators">JavaScript operators</a></p></li><li><p><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Never_use_eval!">eval()</a></p></li></ul><h2>Example projects</h2><ul><li><p><a target="_blank" href="https://codepen.io/giana/pen/GJMBEv">Javascript Calculator</a></p></li><li><p><a target="_blank" href="https://codepen.io/mjijackson/pen/xOzyGX">React Calculator</a></p></li><li><p><a target="_blank" href="https://github.com/x0uter/javascript-calc">Javascript-CALC</a></p></li><li><p><a target="_blank" href="https://github.com/kana800/Side-Projects/tree/master/1-Beginner/calculator">Python Calculator</a></p></li></ul>

An electronic calculator is typically a portable electronic device used to perform calculations, ranging from basic arithmetic to complex mathematics.

Project Ideas