Life Overview Base

A bird's-eye view.

Intro

Author: Emily Dela Cruz

What is this? Why does it exist?

I was directly inspired by Buster Benson's project and decided to create a version with React. This repo is the bones of what powers the live version on my site.

Fire up your own copy, and let me know how it goes!

Live demo

Setup

This project was bootstrapped with Create React App.

Note: I've set a homepage property in package.json, but feel free to ditch that if you're serving this project at the root domain. OR you can replace http://mywebsite.com/life-overview-base with whatever domain and subdirectory/sub-route you need 🤙

In the project directory, you can run:

npm install

Installs all the dependencies. Do this before running any other commands.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Content

Data from an array full of objects fills the Week components with content. In my own project I've created an endpoint that pulls from my WordPress CMS. It brings back an array with specifically formatted objects. Each object has week, date, title and content keys.

It's looks like this:

[
  {
    "week": 1,
    "date": "April 15, 2020",
    "title": "Example Heading 1",
    "content": "This is the content"
  },
  {
    "week": 5,
    "date": "May 20, 2020",
    "title": "Example Heading 2",
    "content": "This is the content"
  },
  {...}
]

week is calculated by my API, and is how many weeks there are from my birthday to the date of the single record.

In the future, I'm hoping to make this more flexible...

If you don't want to rely on an API for your content, you can make a static JSON file your source. Delete App.js and rename AppJSON.js to App.js. AppJSON.js pulls from src/json/records.json. You can use a tool like this one to calculate the values for week.

Today Indicator

Its placement is calculated with weeksBetween from a helper function in src/helpers/index.js. You'll need to replace start with your own birthday/start date.

Where else you need to change date things...

startYear in src/components/WeekBirthday.js needs to be changed to the year of whatever your birth/start date year is.

Weeks with custom background colours

In my project I have several Week.js components that have a different background colour to highlight specific moments/periods. In this base project, there's a few weeks that have a red background. It's pulling from exampleBackground, a helper function in src/helpers/index.js. It checks against the Week.js component's weekId prop, and if it matches any values in the array found in exampleBackground, that Week.js gets a class added to its classesString (.week.example-background selector found in Week.css). Again, you can use a tool like this one to find the correct number.

Feature Roadmap

• Make project conform to at least WCAG AA
• Create a formatted array of objects from a different API's response array
  • ie. No need to pull from an array with a specfic response
• Create different views
  • Public
  • Auth-protected (show more details)
• Better mobile style and functionality

Credits

Thank you to Buster Benson for sharing his work publicly.

Badges in this README.md provided by shields.io.