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:

• Create a Firebase project
• Register your app with Firebase
• Firebase config object

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.

• Email/Password Sign-in
• Google Sign-In
• Facebook Login

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