1 week solo project for FE Mod 2 (Week 6)
Background and Description
For this project you will be working on your own to write a program in React. Specifically, you will be creating an application that solves a common problem that most students face when reviewing course material/concepts - finding effective study techniques to optimize learning retention and recall.
Goals and Objectives
- Build a study application with React and Sass
- Demonstrate your ability to communicate expert-level knowledge on a technical topic
- Write modular, reusable code that follows SRP (Single Responsibility Principle)
- the fetch API for sending/receiving data
- ReactJS for organizing your application into components
- JSX for writing your component templates
- Sass for getting fancy with your CSS
Technologies not listed above require instructor approval
- App must have some form of interactivity for the user
- it should not just be text on a page with links, though it may include some instructions or resources to learn more
- interactivity should help your users understand the topic you’ve selected (e.g. if your topic is DOM manipulation with jQuery, maybe the user can click an element on the page and some text would appear to show them how they would select it with jQuery code)
Your README should include the following, in this order:
- Abstract at the top (A sentence or two describing the project)
- Install/Setup instructions
- Everything else (must include wireframes and screenshot/GIF of finished project)
Build a custom dataset
Memoize as a Flashcards Study tool that quizzes the user on technical vocabulary Or other optional topic that is instructor approved
You must create one dataset that will represent your application data.
Your dataset must have at least 30 records (If your dataset is an object, it should have 30 keys. If it’s an array, it should have 30 elements)
You must run your dataset through a JSON validator before submitting a pull request for your dataset here. Your datasets should be added in a single file to the
/datasetsdirectory. Be sure to export at the bottom of your file.
You must save data to localStorage about correct / incorrect answers to localStorage so that the next time a user visits the page, they will only be shown the flash cards they got incorrect / still need to practice
Choose your own adventure
Memoize as a study tool for a technical topic that you’ve learned or heard about in Mod 1/2, and:
- demonstrate your expert knowledge on the concept
- allow others to learn and practice the concept
Check out some of these learning tools from the wild:
While the application you build doesn’t have to be as complex as the examples above, know that you have the freedom to be ambitious and take your study tool in whatever direction you choose.
Potential Topic Ideas
- DOM Manipulation with jQuery
- The Call Stack
- Prototypal Inheritance
- Sass/CSS (Should be narrowed down to something specific, like flexbox, pseudoselectors or how the specificity/cascade works)
- Prototype Methods
- Git/GitHub Workflow
- Terminal Commands/Navigating the Terminal
- Sorting Algorithms
You are free to pick from this list, use it as inspiration, or pitch your own topic. As you go to pick your topic, take the following into consideration:
- What type of tool do you want to build? are there any topics that lend themselves easily to that learning format?
- What topics were you hoping to learn more thoroughly or what topics did you feel fuzzy on? this is a good opportunity to give yourself a chance to explore them further (e.g. if you have a hard time remembering terminal commands - building a study tool will help you get better at them!)
- Your topic should be specific and focused - the more specific your topic, the easier it will be to build a manageable study tool to demonstrate it
- Novice - The application is missing multiple features/requirements outlined above.
- Advanced Beginner - The application is in a useable state, but is missing part of one or more of the technologies outlined above.
- Proficient - The application uses the above technologies to a professional level.
- Exceptional - Meets all expectations of
Proficient. In addition, the application has additional features/extensions implemented that go above and beyond the project requirements.
- Novice - The application is confusing or difficult to use. The UI is incomplete.
- Advanced Beginner - The application may be confusing or difficult to use at times. The application shows effort in the interface, but the result is not effective because UX and/or UI still present an application that is incomplete or difficult to use.
- Proficient - The application has many strong pages/interactions. The application can stand on its own to be used by instructor without guidance from a developer on the team. The application is fully responsive.
- Exceptional - Meets all expectations for
Proficient. In addition, the application has clearly had special consideration around usability on devices.
DRY(Don’t Repeat Yourself)
- Novice - There are several (10+) instances of duplication and one or two major bugs. Developers write code with unnecessary selectors or tags which do not increase clarity.
- Advanced Beginner - There is some duplication (5-10 instances) in the codebase. There may be one to two minor bugs. There may be some unncessary selectors or tags. Application adds organization for the whole stylesheet and within rules.
- Proficient - Application is thoughtfully put together with comments to help guide organization. There may be some duplication (fewer than 5 instances) present. Comments are present to assist with organization of code.
- Exceptional - Meets all expectations for
Proficient. The application has exceptionally well-factored CSS/Sass with all styles separated out into logical stylesheets. There are zero instances where an instructor would recommend taking a different approach.