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.
https://year-in-pixels-af189.web.app/
- Clone project:
git clone https://github.com/lPaths/year-in-pixels.git
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 file
config.ts
insrc/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',
}
You'll need to enable these 3 methods on firebase authen.
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)
}
}
}
And start the application with npm start
or yarn start
that will run the app in development mode.
Open http:https://localhost:3000/ to view it in the browser.
The page will automatically reload if you make changes to the code.
This project use Firebase hosting for deployment. You can refer Firebase's docs if you want to deploy your own
Please read our CONTRIBUTING.md before submitting a Pull Request to the project.
MIT License Copyright (c) 2020 Phat Mai