Table of Contents
This project was made as part of the Chingu community, giving Developers an opportunity to work with each other in teams to create time limited projects. This was a beta voyage to test the new Chingu system and ran between 19th Nov 2018 and 21st Jan 2019 for a total of 8 weeks. This project was completed in our spare time.
This project was made by:
Project live link: PowerPanel
We decided to make a clone of Momentum dashboard as it looks when viewed as a Chrome or Firefox browser extension but creating the app using React.js.
The user stories to be completed were:
- I can see a different background image every day.
- I can enter my name and edit my name.
- Once I enter a name, I can see a greeting and the clock.
- I can put my main focus for the day and check it off when done. I get a well doone message when done and I can also enter a new task.
- I can see a random quote every day, 'like' the quote and be able to share on Twitter.
- I can access a search in Google from the app.
- I can see the local weather and click to see a forecast for the next 5 days.
- I can create a Todo list, enter tasks, edit them, move them to different lists and check them off. Once checked off I can see them in a 'done' list.
Clone the repo to download all files locally.
Install all project dependencies:
- Start the development server:
This command 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.
Launches the test runner in the interactive watch mode.
npm run build
Builds the app for production to the
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 then ready to be deployed. You can use your browser and visit
Please note that the package used to build the site:
create-react-app means that the site comes with a pre-installed service worker to enable offline use but this only works in production mode.
For the app to work on your local machine you will need one API key for OpenWeatherAPI. The rest of the data for quotes and the background image are served via an API URL without needing to use a key.
Once you have the API key you will need to create a .env file in the root directory of your app. In this file it will need to look like this where YOUR_API_KEY is replaced with your new key:
The code in Weather.jsx will pull this environmental variable from the .env file and you will be able to run the app on your local machine. Please note that if you publish the code with your API keys, anyone using React will still be able to see this API key as they run at build time and are visible within the code.
Create React App
Live project link: PowerPanel https://power-panel.herokuapp.com/