#hackathon #hashnode #aws #awsAmplify #awsamplifyHackathon @awsamplify
How Time Master?
Before Creating this Project i only new Reactjs, and rest of the tech stack i learnt on the way. Let me explain in detail, So i was facing this challenge that i'm unable to track my day, my whole day would pass away and i didn't had any clue where?.
Idea!
So i decided, being a programmer, now this is my duty to solve this issue else i cannot call myself a programmer(xd). So after scrambling for weeks i finally came up with this idea, let's create an app which will consist of multiple stopwatches and I can assign the respective names/tasks to it, save the data to a data store and at night at bed could see in visual graphs, oooh there I go, this is how I'm spending my days and weeks.
Execution:
As Stated i already knew Reactjs so it wasn't tough for me to switch to native, while facing problems in managing data across different screens, I came to know this is a general issue and to solve it Redux was created, and I learnt it. While moving forward i got to know about this hackathon initiating users to create apps on Amplify, and here comes the entry about my easy-to-implement backend via AWS-Amplify, from then never looked back and here's my first app! @1.0.0
Must Watch the explanation in detail (Video)
Hey this is Ayush Gupta and this blog is on AWS Amplify hackathon, from the listed topics i have choosen "A productivity application", also i had already prepared a short "1min" mockup of the app, do checkout it.
https://www.youtube.com/watch?v=Rv97Ynz1Btc&t=6s
Time Master
Time Master is a user-friendly productivity app that helps you manage your time effectively. Create custom stopwatches for different tasks, easily switch between them, and track your time investment. The app also features a to-do list, automatically saves your time data, and presents it in a graph. Stay organized, boost productivity, and gain insights into your time allocation with Time Master.
Project Overview
Time Master is a productivity app designed to help you effectively manage your time and tasks. With Time Master, you can create custom stopwatches for different activities or tasks in your daily life. Simply start and stop the stopwatch as you switch between tasks, allowing you to accurately track the time invested in each activity.
In addition to the stopwatch feature, Time Master also includes a convenient to-do list. You can easily create and organize your tasks, ensuring that nothing falls through the cracks. The user-friendly interface makes it simple to add, edit, and mark tasks as completed.
Time Master takes care of data management for you. Your time data is automatically saved, calculating the total hours invested in each task. The app presents this information in a visually appealing graph, giving you a clear overview of your time allocation.
To ensure your data is always saved and secure, Time Master automatically stores your time entries in a database. This means that even if you close the app or the day changes, your time records are preserved.
Time Master is designed to simplify your time management process while providing valuable insights into how you spend your time. With its intuitive interface and seamless data handling, it empowers you to stay organized, increase productivity, and make the most of your valuable time.
Now we will be diving deep into the project to understand how the things are working behind the scenes.
Tech Stack
First of all talking about the technologies, the techstack used in the project are
React-native cli for the frontend part
Redux as the state manager
Redux persist which locally stores users data so if they close the app and open it again they can see where exactly they left.
Now giving my project life the backend so i have used AWS amplify for that, i had no prior experience with cloud and as their documentation suggests you need not to one can go for it without any prior experience, documentations tutorials were really easy to grasp and implement in the projects.
The studio version of Amplify, Amplify studio is also very easy to use and configure, one can implement authentication with clicks and then simply pull it in your project like we do in git. And this is also achievable with cli version you just need to attend their QNA.
Coming to storing data in cloud so one can use amplify add API and just configure their GraphQl schema, here is mine: then from frontend in my case, i just need to mutate/add the data with some lines of code and amplify will take care of rest and our data will successfully be stored in Aws dynamo DB.
Now very important part how to add Authorisation, of course, you want only the authenticated users, and owners, to create read update their data, Sometimes things are as simple as clicking a button but still we aren't able to do it. The same was with me and I'm glad i asked my query to one of the AWS Amplify employees and he was kind enough to give me back a response than you Erik @erikCH. One can simply achieve the result first via studio, by selecting the data model and enabling only owners or you via cli where you defined your graphql schema simply add this line of code.
and you can simply update your code with Auth fetching and mutating, again i repeat original documentations are the best resource!
And im using this storage API stuff for my statistic screen which consists of dates vs total time invested in hours. But for the time being I'm using dummy data I need to gain more knowledge regarding pricing and all but the flow is simple and one can simply replace dummy data by data fetched by API call with auth.
So ya we have completed our project from ReactNative to Redux & AWS amplify out there to make our life simpler. And i feel i could have done more but seems like July 31 is faster than Usain bolt, so ya fine, my GitHub project repo link is GitHub Repo Link. This is the first version of my project @1.0.0, were facing some issues will solve it and counting has actually beginned now. The whole AWS cloud is in my Todo.
Architecture Flow
Wireframes
so here's my App.js the main component calling Higher Order Component auth which provides a beautiful login screen, user logins and comes to the home page.
These all screens are actually inside a component containing 3 main components bottom tab add activity and edit activity.
The bottom tab has 4 screens stopwatch, table stats and todo.
Todo is a simple todo maintained internally via Redux state manager.
Statistic Screen is taking data from AWS dynamo DB. (Statistic Screen is the one connecting with the cloud! fetching,mutating data)
Stopwatch is the main brain of my app all logical stuff is embedded here, painful nights, consisting of all the functionality add activity, edit activity whole CRUD is involved here...
Add Activity was truly a nighmare!
Yeah, it was fun, btw this is my first project and talking more about myself I'm currently 19 years old and will be joining my college next week and I'm fascinated by the crux of startups and tech. Written in a hurry because very less time is left, i wish i had more time.