Year In Pixels

A “Year In Pixels” is a colorful way to track the year’s moods, habits, or anything else. It’s also very efficient, fitting all days of the year into a single page. Once you get all the squares filled in, it looks pretty and you can gain some insights into your moods. - Wellella

This is an educational project. The whole idea came from a single image I found on Pinterest 3 years ago.

Demo

https://year-in-pixels-af189.web.app/

Development

Clone project: git clone https://github.com/lPaths/year-in-pixels.git

Requirements and Configuration

You’ll need to have Node 8.16.0 or Node 10.16.0 or later version on your local development machine.

There're 3 steps:

Replace Firebase config object

Create file config.ts in src/utils/
Export config. E.g.

const firebaseConfig = {
  apiKey: 'api-key',
  authDomain: 'project-id.firebaseapp.com',
  databaseURL: 'https://project-id.firebaseio.com',
  projectId: 'project-id',
  storageBucket: 'project-id.appspot.com',
  messagingSenderId: 'sender-id',
  appId: 'app-id',
  measurementId: 'G-measurement-id',
}

Enable Firebase authentication methods

You'll need to enable these 3 methods on firebase authen.

Firestore rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Allow only authenticated content owners access
    match /pixels/{userId} {
      allow write: if request.auth.uid == userId
      allow read: if request.auth.uid == userId || (request.auth.uid in resource.data.shareWith)
    }
  }
}

Start development server

And start the application with npm start or yarn start that will run the app in development mode. Open http://localhost:3000/ to view it in the browser.

The page will automatically reload if you make changes to the code.

Deployment

This project use Firebase hosting for deployment. You can refer Firebase's docs if you want to deploy your own

Firebase Hosting

Contributing

Please read our CONTRIBUTING.md before submitting a Pull Request to the project.

License

MIT License Copyright (c) 2020 Phat Mai

License

6thpath/year-in-pixels

ErrorLooks like something went wrong!

About

Topics

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages