Punctuate
Punctuate is a React application that helps you apply the correct punctuation to your text and articles. It utilizes the OpenAI GPT-3.5 Turbo model to ensure accuracy and efficiency in adding the right punctuation marks.
Punctuate doesn’t come with many features, as it’s a simple app with a singular purpose. However, what excites me the most is its potential to evolve into something far greater than it currently is. I’m on a journey with this app, and I can’t wait to see how far it will go.
Why The Web Stack
- I chose React for this project primarily for its scalability and its ability to manage states efficiently. Additionally, React’s robust error-handling capabilities allowed me to handle errors more gracefully, ensuring a smoother user experience. React.Js
- I opted for Tailwind CSS because its pre-built utility classes significantly speed up my development process. Tailwindcss
- I went with Vercel for hosting because of its reliability and speed of deployment. Vercel
Challenges & Solutions
The main challenge I encountered in this project involved optimizing the UI for smaller screens. As you can see from the images above, the UI is split into two sections, placed side by side. However, this layout doesn’t work well on smaller screens due to limited space, so I had to rethink the design to accommodate smaller devices.
I solved this by dynamically detecting screen sizes using React state and an event listener that monitors window resize events. The state would update whenever the screen size changed. I then used this utility function to write a boolean expression that returns true when the user is on a smaller screen.
On smaller screens, users have a single input field where they can type or paste their articles. Once they submit the article and the process completes, the corrected version is rendered. This was achieved through conditional rendering based on the boolean expression, ensuring a seamless experience across different screen sizes.
Lessons Learned
This project helped solidify my knowledge of integrating AI into applications. It also taught me that there are multiple ways to detect screen sizes beyond just using media queries, giving me a deeper understanding of how to handle responsive design more dynamically.
Other Projects
Feel free to reach to me if you are looking for a developer or maybe you just want to connect.
ken.bassey9@gmail.com