Doze is a project centered around the concept of 12 Week Goals, aiming to assist users in achieving their objectives within a 3-month period. Doze platform allows users to define main goals and break them down into sub-goals, providing a structured approach to goal setting and accomplishment.
Doze owes itās existence to the collective efforts of three talented developers, Illona, Sophie and Tony. Each contributing their own unique skills and perspectives, to create a platform that not only meets technical demands of goal tracking. But also prioritises user experience and satisfaction.
The Doze platform stands as a testament to their collaborative spirit, passion for development, and commitment to helping users achieve their goals effectively.
Doze adopts a cutting-edge and streamlined tech stack to ensure a smooth and intuitive user experience. The chosen technologies encompass:
- React (Next.js): Empowering the frontend with Next.js, a React framework that facilitates dynamic, responsive, and SEO-friendly user interfaces.
- Tailwind CSS: Enhancing styling and design with Tailwind CSS, a utility-first CSS framework that accelerates the development process.
- Node.js & Express: Driving server-side development, handling requests, and managing the application's logic efficiently.
- MongoDB: Serving as the NoSQL database, MongoDB excels in storing and managing data with scalability and flexibility.
- Redux: Ensuring effective state management, Redux maintains a predictable state and optimises the data flow within the application.
- Jest: Jest ensures efficient and reliable testing, making it an integral part of the testing toolkit for JavaScript developers.
- SuperTest: Enables developers to create comprehensive tests for API interactions, ensuring the correctness and reliability of the backend functionality.
- NextJS: Selected for its seamless integration with React, Next.js empowers Doze with server-side rendering, improved performance, and simplified deployment.
- Tailwind CSS: Chosen for its utility-first approach, Tailwind CSS streamlines styling and accelerates the development of a consistent and visually appealing UI.
- Node.js & Express: These backend technologies were chosen for their efficiency in handling server-side operations, managing routes, and ensuring the smooth execution of the application's logic.
- MongoDB: As a NoSQL database, MongoDB offers flexibility and scalability, accommodating Doze's data storage and management requirements.
- Redux: Included for its ability to maintain a centralized state, Redux ensures a predictable data flow, making it instrumental in the management of complex application states.
- Jest & SuperTest: Leveraged for automated testing, Jest and SuperTest enhance Doze's code reliability and robustness by facilitating unit and integration testing.
GitHub serves as a collaborative platform for version control, facilitating team collaboration and code management. It enables developers to work on different aspects of the project simultaneously, ensuring a coherent and well-organised codebase.
Trello is employed as a project management tool, enabling efficient task tracking and team coordination. It provides a visual representation of project progress, task assignment, and helps organise development sprints.
The project management workflow of Doze relies on a seamless integration of Github and Trello. A combination of GitHub and Trello is utilised for effective project management. GitHub manages version control and code collaboration, while Trello tracks tasks and project milestones.
Using a Trello extension that established a direct link between Trello tasks to our Github issues, branches and pull request. This integration provides a comprehensive overview of ongoing work, contributors, and the status of each task. Regular stand-up meetings ensure clear communication and help in organising tasks based on priority and team member availability.
Working in a team involves effective collaboration and organisation. The project folder structure is designed to enhance collaboration, streamline development, and maintain a clear separation of concerns.
The Doze project adheres to a modular structure, emphasising clear organisation and efficient collaboration. Each major feature or module is allocated its dedicated folder, contributing to enhanced code readability and maintainability.
Doze
ā
āāā next
ā
āāā app
ā
āāā components
ā
āāā public
ā
āāā server
ā
āāā .gitignore
ā
āāā .env
ā
āāā jsconfig.json
ā
āāā next.config.mjs
ā
āāā package-lock.json
ā
āāā postcss.config.js
ā
āāā [README.md](http://readme.md/)
ā
āāā tailwind.config.js- next: The
nextfolder houses configuration files and settings for the Next.js framework, providing server-side rendering and other performance optimisations. - app: The
appfolder contains the frontend components, ensuring a structured approach to building user interfaces and managing application states. - components: This folder consolidates reusable
componentsutilised across the application, promoting code reuse and maintainability. - public: The
publicfolder stores static assets such as images, which can be easily referenced in the application. - server: The
serverfolder encompasses the backend logic, utilising Node.js and Express for server-side development. - .gitignore: The
.gitignorefile specifies files and directories to be ignored by version control, preventing unnecessary files from being included in the repository. - .env: The
.envfile stores environment variables, allowing secure configuration and management of sensitive information. - jsconfig.json: The
jsconfig.jsonfile configures the JavaScript project settings, facilitating module resolution and path mapping. - next.config.mjs: The
next.config.mjsfile contains configuration settings for the Next.js framework, enabling customisation and optimisation. - package-lock.json: The
package-lock.jsonfile records the exact versions of installed packages, ensuring consistent dependencies across team members. - postcss.config.js: The
postcss.config.jsfile configures PostCSS, a tool for transforming styles with JavaScript plugins, enhancing the styling workflow. - README.md: The
README.mdfile serves as documentation, providing essential information about the project, its structure, and how to set it up. - tailwind.config.js: The
tailwind.config.jsfile configures Tailwind CSS, a utility-first CSS framework, to tailor the styling of the application.
This well-organised structure contributes to a collaborative and efficient development environment, facilitating seamless coordination among team members.
Doze incorporates various UI components for an intuitive and user-friendly interface. These include components for goal creation, task management, and progress tracking. Each component serves a specific purpose, contributing to the overall functionality of the application.
components
ā
āāā DashboardComponents
ā āāā HeaderContainer
ā ā āāā components
ā ā ā āāā HeaderBackground.jsx
ā ā āāā HeaderContainer.jsx
ā
ā āāā MainGoalsContainer
ā ā āāā components
ā ā ā āāā AddGoal.jsx
ā ā ā āāā Goal.jsx
ā āāā MainGoalsContainer.jsx
ā
ā āāā SubGoalsContainer
ā ā āāā components
ā ā ā āāā AddSubGoal.jsx
ā ā ā āāā ProgressionContainer.jsx
ā ā ā āāā SmallSubGoals.jsx
ā ā ā āāā SubGoalTitleContainer.jsx
ā āāā SubGoalsContainer.jsx
ā
āāā MainGoalComponents
ā āāā components
ā ā āāā AddSubGoal.jsx
ā ā āāā ClearSubGoals.jsx
ā ā āāā SubGoalComponent.jsx
ā āāā MainGoal.jsx
ā
āāā SignInComponent
ā āāā SignIn.jsx
ā
āāā Footer.jsx
āāā Header.jsxTakes a string URL as a parameter then, checks if URL includes image file types. Returns true or false based on if it includes file types.
const isImage = (url) => {
const imageFileType = ["jpg", "jpeg", "png", "gif", "bmp", "svg"];
const imageType = url.split(".").pop().toLowerCase();
return imageFileType.includes(imageType);
};Checks if the String URL included the image file type. If True, the image is set to the background image of the header
const handleImageChange = (e) => {
const inputValue = e.target.value;
if (!isImage(inputValue)) {
setValidHeader(false);
return;
}
setHeaderImage(inputValue);
setValidHeader(true);
};Returns an element which allows user to change the background of the header container
Handles the live changing of the value
const handleValueChange = (e, setValue) => {
setValue(e.target.value);
};Once the user presses on enter or clicks off element. It removes the focus, from that element. Also, checks if string is empty. If so, string is set to itās default
const handleEnterOrBlur = (e, setValue, defaultValue) => {
e.preventDefault();
const inputValue = e.target.value;
setValue(inputValue === "" ? defaultValue : inputValue);
setIsHeader(false);
};Handles removing the focus from the element.
const handleClickOutside = (e) => {
if (headerRef.current && !headerRef.current.contains(e.target)) {
setIsHeader(false);
}
};Returns an element which displays the header section. Which includes the header image, header title and the header quote
This function sends a post request to the database, which deals with adding a goal to Main Goal collection.
const handleAddGoal = () => {
// Code to be added
};Returns an button that displays and deals with adding Main Goals to the āMain Goals Pageā and database
Functions compares the Main Goal with the Main Goals in the database. Once a match is found it sends user to the Main Goals Page, which will display more information on the Main Goal selected
const handleGoalPressed = () => {
// Code to be added
};Returns an element which displays the title and icon of the main goal
Functions searches for the Main Goal inside of the database, once a match is found it removes the Goal from the main page and the database
const handleRemoveGoal = (goalToRemove) => {
// Code to be added
};Function deals with adding Sub-Goals to the dashboard. On default these Sub-Goals, are not connected to any main goal. So theyāre added from a different side of our database
const handleAddSubTask = () => {
// Code to be added
};Returns a button element, which deals with adding Sub-Goals.
Returns an element which holds all the components related to the specific stage of a task. This includes the SubGoalTitleContainer, SmallSubGoals, SubGoals, and AddSubGoal.
Functions that deals with displaying the SubGoal Modal
const openModal = () => {
setIsModalVisible(true);
setTaskClicked({ title: task });
};Returns an element which displays the title and icon of SubGoals.
Function makes a DELETE request to the database, which removes all SubGoals from a specific stage. Along with re-rendering the section, updating the component with no tasks.
const handleRemoveAllTasks = () => {
// Code to be added
};Returns an element which renders the three stages (To-do, In Progress and Done)
Functions deals with adding a Sub-Goal to the Main-Goal collection. Along with re-rendering the Sub-Goals inside of the page
const handleAddSubTask = () => {
// Code to be added
};Returns an button element, adding Sub-Goals to Main-Goals.
Returns a button element which clears all tasks from the Sub-Goals section. (Function that handles the removing is found in MainGoal.jsx )
Function finds the Sub-Goal inside of the database, and removes the Sub-Goal and also re-renders the list with the updated changes
const handleRemoveTask = () => {
// Code to be added
}Returns an element which displays the title and icon of a Sub-Goal, also including a trash bin icon for removing the specific task
Function that checks whether an emoji is inputted or not. If not, it will be defaulted to a smiley face
const emojiPicture = () => {
if (emoji !== "") {
return emoji;
} else {
return "š";
}
};Function that deals with preventing the page from refreshing
const submitHandler = (e) => {
e.preventDefault();
};Function that deals with setting the emoji state
const handleEmoji = (e) => {
setEmoji(e.native);
};Functions that displays the Emoji Picker, depending on state
const toggleEmojiPicker = () => {
setIsOpen(!isOpen);
};Function that deals with what tag has been selected
const handleTagInputChange = (e) => {
setTagInput(e.target.value);
};Function that deals with the selection of colours
const handleColourChange = (colour) => {
setSelectedColour(colour);
};Functions that ensures that a user has selected both a tag name and a colour. Without both being chosen, an error will show up
const handleAddTag = () => {
try {
if (tagInput !== "" && selectedColour !== "") {
setTags([...tags, { text: tagInput, colour: selectedColour }]);
setTagInput("");
setSelectedColour("");
} else {
alert("Please enter a tag and select a colour");
}
} catch (error) {
console.log(error);
}
};Function that deals with removing selected tags
const handleRemoveTag = (index) => {
const newTags = [...tags];
newTags.splice(index, 1);
setTags(newTags);
};Returns an element which handles the inputs a user will change to give information to their Main-Goals.
Function deals with preventing the page from reloading on submit
const submitHandler = (e) => {
e.preventDefault();
}Returns an element which displays the user sign in page. Including username, password, Instagram, Github and Facebook
Returns an element which displays the footer of the page, which also links to other sections of our platform.
Returns an element which displays the navigator of the page. This handles linking different sections of our page. The design of this element is dependent on the users login status. Different design for being logged in and logged out.
Testing is a critical aspect of software development that ensures the reliability and functionality of the application. In Doze, testing is implemented to identify and fix bugs, validate features, and enhance the overall quality of the codebase.
Jest is employed for JavaScript testing, offering a comprehensive testing solution for React applications. SuperTest is utilised for API endpoint testing, providing a simple and expressive syntax for HTTP assertions.
Testing is integrated into the development process, with unit tests for individual components and API routes. Continuous integration tools ensure that tests are run automatically, providing rapid feedback to developers.
Redux is a predictable state container for JavaScript applications. It is used in Doze to manage the application state in a centralized manner, making it easier to maintain and update the state across various components.
Redux is employed to manage global state, ensuring consistent data flow throughout the application. Actions trigger state changes, and React components subscribe to the Redux store to receive updates.
MongoDB is chosen as the database for Doze due to its flexibility, scalability, and document-oriented structure. It accommodates the diverse data needs of the project, provides efficient querying, and seamlessly integrates with the Node.js backend.
Third-party libraries enhance Doze's functionality by providing pre-built solutions for common tasks. These libraries save development time, offer robust features, and contribute to the overall efficiency and performance of the application.