With Thanksgiving quickly approaching, many people are dreading the extremely awkward dinner-table conversations in their near futures. fact • distract provides users with a plethora of randomly generated dumb facts to make quickly changing the subject a breeze. Users who might want to curate a list in advance have the ability to save facts to a list for later use.
Landing page (sunrise mode)
Landing page (dusk mode)
Landing page (mobile)
Saved facts page
Saved facts page (mobile)
Landing page - user can generate and save new dumb facts and view their recent history
Saved facts page - user can see facts they've previously saved
Dropdown menu - user can toggle between two color modes (sunrise & dusk)
- As this project was built with SCSS, all stylesheets are contained within the src/styles directory
- Dynamic styling for dark/light mode and animations are also contained within the src/styles directory
- Component directories are nested within the directories of their parent components to mirror the code architecture
- All routes defined in index.js
- App/AppContextProvider contains all props and type validation
- Bootstrapped with Create React App
- GSAP
- react-elastic-carousel
- Styled Components
- Random Useless Facts API
- Responsive mixin from @maxluster
- Building with Context from the beginning of the project, for both data and styling
- Hitting the ground running with Router 6 just a couple days after it was released
- Getting my first responsive design for mobile done
- Getting familiar with GSAP
- Data coming from this API frequently contained inconsistent punctuation, curious formatting, wildly varied sentence length, and some extremely long words; this required a thorough data-cleaning function tacked onto the fetch call to make responses consistently presentable on the page
- Writing tests for incoming data was challenging, partly because it was randomized and partly because it was animated on the page and the timing became hard to predict
- Had to take a couple days off, as a very full work slate and extremely taxing previous project had led to serious burnout, so this project timeline was shorter than I'd have liked
The deployed app can be viewed here.
If you'd like to run this repo locally:
- Clone down this repository
- In your terminal, run:
npm install
npm start
- If you're not automatically navigated to
localhost:3000from your terminal, visit it in your browser - Get ready to learn some dumb facts
- Different language options
- Back end to handle user accounts
- Progressive web app
- Project Spec provided by Turing School of Software & Design