LifeSite

This is how the site looks like.
Logo

Inspiration

The inspiration for this project was to make an all-one app. We decided on this idea because we came up with several ideas and we decided to merge it into one big application. That's how we came up with LifeSite.

What it does

LifeSite lets you journal and set goals. And it lets you save them daily. You can also look back at your mental and physical health to see your path up until today.

How we built it

We built it with TypeScript/TSX as the main language, we used Electron for packaging the web app, and Next.JS for the framework.

Challenges we ran into

We ran into many challenges so to start off with getting everyone on the same page for example it was hard to get everyone to be able to run the app right off the bat. We also had to make sure that everyone had the required applications like nodejs so that the code would actually run. Then we ran into the big challenge to get an electron to work which wasn't easy. Also implementing all the features that are seen in the end product wasn't a walk in the park.

Accomplishments that we're proud of

We are proud to have been a team and with the end product. This was all of our first hackathons so we really didn't know what to expect but I feel it turned out well.

What we learned

We learned how to use Electron to wrap a web app into a desktop app, and we learned how to collaborate on bigger projects as most of us have only ever worked on individual projects, such as by using GitHub Projects' kanban board feature to collaborate better and keep track of tasks.

What's next for LifeSite

Something that can be added to LifeSite to bring it to an even higher level is adding a more efficient way to look back at previous days. An example would be something like a line graph tracking the mood meter over time. Another feature can be a better markdown editor, and in general, the UI could be made more smooth but that's just a matter of tuning.

Built With

electron
electron-store
jotai
next-js
nextron
react
react-markdown
remark-gfm
sass
tailwind-css
typescript

Submitted to

Recess Hacks 3.0 by Grant Ou

Created by

I worked on front-end and a little backend. Like making users able to input and also recommendations on a new page. First time using anything besides Scratch and p5 jS but i learned a lot.

Andy Yang
I worked on the back-end, mainly with saving and loading the information users would input. It was my first time using TypeScript, which required me to learn a lot in 48 hours.

Nathaniel Rayman
I mostly worked on the frontend ― creating the calendar, mood meter, and markdown input field using React components and TailwindCSS for styling.

I learned a lot about state management ― React's useState and Jotai atoms ― during this challenge. I haven't built anything before that requires syncing state across many components like this.

Bill Huang
I helped work on the design of the application. And front end stuff, I also tried to learn typescript.

Artur Kalyadin
Java