Just ToDo-It is a fullstack productivity application that allows users to manage their own todo list, link up with friends, join groups, and work on projects together. It features:
- Custom-built authentication system and API using Express
- Dynamic front-end functionality with Vue 2
- Data Storage and persistence with MongoDB
- Navigate to https://justtodoitapp.com/
- Click the link on the message, "Got an account? Login! If not, Sign up here!"
- Complete the signup form using the following constraints:
- Email must be in valid format (ex. email@host.com) and must be unique (one account per email address)
- Username must be 4 - 32 characters long using only alpha-numeric characters (a-z, A-Z, 0-9), underscores (_), and must be unique
- Password and Confirm Password must mach exactly
- Click submit
- After hitting submit, you will be redirected to the login page to sign in
- Dashboard: your home page where you can view incomplete todos, friends, and associated groups. There are links to jump to these pages at the foot of each section.
- Todos: This is your personal todo list. You can create by using the text input bar and then clicking "Add". At the foot of each incomplete todo instance, there is a link to complete and to delete the todo. Completed todos follow the same format, replacing the link to complete with a link to mark it as incomplete again. *As a note, friends will be able to see your todo list on your profile page, but will not be able to edit it.
- Friends: This is the page to view your friends information in its entirety. You can respond to friend requests. Clicking on usernames will bring you to that person's user profile page.
- User Page: Here, you can interact with the user associated with this page. If you and the user are friends, the user's todos, friends, and groups are displayed here but are unable to be modified. If there is no friend association between you and the user, the page will not display this, but prompt to add the user as a friend. Click the dropdown at the beginning of the page and select "Add Friend". . The user who initiated the group task is listed in the todo information. *User Messages are still being developed and will not work at this time.
- Groups: This page will show you all groups you are associated with, and has an option to create a group of your own! Simply click the button "Create Group" sitting above the list. A dialogue box will pop up to have you specify the group name. Clicking on the group name will bring you to that group's page
- Group Page: Here, you can interact with the group and its users. Users that are a part of the group can see other users associated with the page and create group tasks. These are todos for the group that anyone can create, update and delete. The user who initiated the group task is listed in the todo information. To join the group, simply click the dropdown at the beginning of the page and select "Join Group" *Group Messages are still being developed and will not work at this time.
- Logout: Clicking Logout will sign you out of your current session and then redirect you to the login page. Thank you for using Just ToDo-It!
- Search: Clicking Search will bring up a search dialogue. From here, you can search for users, friends, groups, and your todos. For todos, it will display whether or not it is completed. The names are clickable and will lead you to either the respective user page, group page, or your own todo list.
Please do the following when submitting issues:
- Follow the link to the repository issues page here
- Be as descriptive as possible for the subject and description of issue. The more information, the better! Thank you for your feedback!
- Navigate to the Just ToDo-It repository page
- At the top of the repo information, select the green "Clone or Download" button and then select "Download Zip". A copy of the app.
- Navigate to the application root (you should see folders such as "src" and "public")
- Open up your favorite terminal and run the following commands:
$ npm install$ touch .env
- Open .env in your favorite text editor or IDE, and copy the following information:
API_HOST=localhost
API_PORT=3000
MONGO_DB_URI_DEV=mongodb://localhost:3030/todo-list
SECRET_KEY=workHard
SALT_WORK_FACTOR=15
CORS_ORIGIN_DEV=http://localhost:8080
- Open src/config/server.js and make sure that you see the following:
At the beginning on line 37
app.use(cors({credentials: true, origin: `${process.env.CORS_ORIGIN_DEV}`}));At the end starting on line 629
mongoose.connect(process.env.MONGO_DB_URI_DEV, { useNewUrlParser: true }, err => {
if (!err) {console.log('connected to db')}
else {console.log(err)}
})- If you do not have MongoDB installed on your compute, please go here to learn how to download and install it.
- Setup is now complete! Please proceed to Development section for more info on how to start the environment.
To get the development environment up and running, please run these commands:
- First Tab (from project root):
(First time only)
$ mkdir -p src/config/db(Every time)
$ npm run db- Second Tab:
$ npm run api- Third Tab:
$ npm run serve- Fourth Tab:
$ mongo --port 3030At this point, the API, DB, and Vue instance should be up and running. You should also be conncted to the mongodb instance running on your computer. Happy Coding!
- Finish realtime chat plugin using Firebase and React
- Write tests
- Implement searchability for group tasks