Welcome to FocusBlock! FocusBlock is a web application that was created to help anyone manage their time in a more productive way. FocusBlock helps you take a task and time block it and realize when you are taking longer then expected to complete a task.
The great thing about FocusBlock is that you are able to reach out to someone automatically if you are struggling. If your FocusBlock goes over time and you designate someone's email as a contact, they will recieve a message requesting assistance!
FocusBlock is part of the PixelogicDev 28 Day Projects stream. Visit the channel here to see more projects like this!
FocusBlock was built using all Javascript tech in a full stack soluton:
Client: React v16.3.2
Server: Node.js v8.9.4
Storage: MongoDB v3.4.3
Note: FocusBlock has only been tested in Google Chrome browser and may have issues on other browsers.
FocusBlock was made with simplicity in mind. There are only two different views, About & Dashboard. The About view will give you a basic overview of FocusBlock and the Dashboard view is where all the magic happens.
When you hit the Dashboard view you will be greeted with a form to start creating your first FocusBlock. This form will consist of the following:
- Title: Name of the FocusBlock
- Timer: Amount of time to focus on this task
- Contact (Optional): Email of the person to contact if needed
Once you create your first FocusBlock all you need to do is select "Get Focused" and you can begin working on your task. Once you complete your task make sure to press "Stop Focusing". This is how FocusBlock knows that you are done with your task!
If you do not press "Stop Focusing" before time is complete AND you have someone set as a contact, an email will automatically be sent out to them requesting assistance on your task.
FocusBlock uses a database to help store multiple FocusBlocks at a time. Don't worry, all email addresses are stripped from your FocusBlock before saving for privacy purposes. In order for FocusBlock to know which FocusBlocks it needs to pull, a custom URL is generated for you. The first time you go to https://focusblock.stream you will see the url above all your FocusBlocks and it should look like this: https://focusblock.stream/dashboard/SomeIdHere.
From that point on, make sure to use that URL to get access to all the FocusBlocks you have already created. When you return, you will need to re-enter any emails for your blocks for the reason stated above.
FocusBlock is an open source application that is looking for contributions! If you are interested in contributing and/or found a bug, please see below to get started with contributing.
All contributing will be done through Github Issues. If you have a bug/improvement please create a Github Issue in this repository.
FocusBlock uses a MongoDB Database that stores very basic user settings. Here is a list of everything being stored in the database:
id -> Custom URL ID
url -> Custom URL path for each person
focusBlocks -> Array of all focusBlocks
Make sure to have MongoDB installed before you run it by following this doc.
Before starting up the database make sure to do these commands:
- Open up a terminal window and type
mongod - Open up another terminal window and type
mongo - In the
mongoterminal use commanduse MyDatabaseName. This will create a local database (Don't forget to add the name of your db to your server.envfile).
This setup will only happen the first time around. Every other time after do these commands:
- Open up a terminal window and type
mongod - Open up another terminal window and type
mongo - In the
mongoterminal use commanduse MyDatabaseName.
FocusBlock uses a Node.js server in order to handle communication between the client and database. There are a few environment properties that need to be set before running the server.
Start by creating a .env file that will store these properties:
BASE_PATH=localhost:3000DB_PATH=mongodb://localhost:27017/focusblockDB_NAME=focusblock
When you are ready to run the server, follow these commands:
cd Servernpm install && npm start
In order to get email working on the client, you will need to create a basic SendGrid account. This will allow SMTP sending via the client. Once you create this account you will need the username and API token.
FocusBlock runs a React client that is simple to get up and running.
There are some properties within the client that are needed to run the app. You will need to create a .env.development.local file before starting the app locally:
REACT_APP_SMTP_USERNAME---> SMTP Username for SMTPJS (From Sengrid)REACT_APP_SMTP_PW---> SMTP Password for SMTPJS (From Sengrid)REACT_APP_API_BASE---> The route for your Node Server (ex.http://localhost:8000)
When you are ready to run the client, follow these commands:
cd focus-blocknpm installnpm start- Visit
localhost:3000
This will run and build the client. At this point you are good to go with the client side.
I want to give a huge shout out to all the libraries I was able to use to make this project possible:
body-parser
cors
dotenv
express
mongodb
shortid
classnames
node-sass-chokidar
npm-run-all
react
smtpjs
SendGrid
Copyright 2018 Pixelogic
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.