DEV Community

Cover image for ReadOnePage - Spend more time reading and learning, and less time in social media
Schemetastic (Rodrigo)
Schemetastic (Rodrigo) Subscriber

Posted on • Edited on

ReadOnePage - Spend more time reading and learning, and less time in social media

This is a submission for the GitHub Copilot Challenge : Fresh Starts, but also could qualify for New Beginnings

Intro

I've noticed that often I've found myself in the situation where I am jumping from one social media to another and dumb-scrolling and feeling like a slave without being able to stop myself. No surprise, social media is usually designed to be addictive, and people spend countless hours in it. I know that many people feel like this too. The problem isn't just wasting time, it is believed that too much time in social media can decrease our attention span, and that makes us less productive.

For this year, 2025, I would like to spend less time in social media and activities that doesn't make me happy, I want to learn more and be more focussed. And the app I built has the intention to kickstart anyone having trouble with focus and at the same time learn.

What I Built

I've built a project that help you to read more in an interactive way, you can choose from a variety of topics, choose a reading mode, and after that you'll be prompted 3 questions.

Demo

Demo link here 🌟

Home page of ReadOnePage

Menu UI of ReadOnePage

(Screenshots may be a bit outdated because I added them before finishing the project)

Repo

GitHub logo schemetastic / read-one-page-app

A web app in Svelte that can help you to improve your focus with interactive reading

OnePageRead

A web app in Svelte that can help you to improve your focus with interactive reading

Svelte installing instructions:

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
Enter fullscreen mode Exit fullscreen mode

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
Enter fullscreen mode Exit fullscreen mode

Building

To create a production version of your app:

npm run build
Enter fullscreen mode Exit fullscreen mode

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.




Copilot Experience

I liked it, and it was very good predicting what I needed a lot of the times. I'll provide more feedback in a comment.

GitHub Models

I did use gpt-4o-mini to generate the questions and answers after each reading

Conclusion

I believe it can improve people life by helping them to read more and stay away from social media.


This is actually my second attempt building a similar web app, in my first attempt I tried to build a reading app in Next.js, but I couldn't finish on time, so I wanted a second chance with this one, but this time I'm using Svelte, and of course starting from scratch.


Start time: 18:50 Jan 24 (Honduras)
End time: <18:00

Disclaimer: Some content is generated with AI, this means that isn't always accurate.


Jan 19 edit to this post (after the 24 hours)
Quick clarification on the "Self-Paced" reading mode, the description there says: “On finish you'll get how much time did you spend reading”, and that doesn't happen, initially that was the idea, but I was running out of time, and I was on a rush because I had to go earlier to do something else, and I forgot to delete that part of the instructions, because I decided that I wasn't going to build that... anyway, just clarifying to be honest with you.

Top comments (2)

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

As I promised, I am going to provide further feedback of my GitHub Copilot experience.

I am new with Copilot, but I think that used wisely it can improve a lot your productivity, something that I like is that it can help to do tasks that I may find a bit annoying or time-consuming. Like writing a utility function or writing a regex. And I like it for this kind of stuff because of that way I still have pretty much a good idea of what is going on in the code and is easier to debug. So, I think that is a lot about finding your sweet spot.

Collapse
 
fernandels_boni profile image
Wéri Boni

Wow I just visited your GitHub and I'm greatly impressed. I too am a front end dev but not with much inspi