Overview

Snapshot is an MIT Licensed open-source solution, designed for effortless high-quality screenshot captures. Input the website URL you want to capture, tweak a few advanced settings if you fancy, and you're set! Plus, for registered users, there's the added convenience of saving and organizing these screenshots.

At a glance

Designed with user experience in mind, Snapshot presents:

1. Home page

The simple yet effective entry point to our tool.

2. Auth Page

3. Screenshot Preview

Instantly view the screenshot you've just taken.

4. Your Screenshot Collection page

For registered users, manage your saved screenshots with ease. Download or delete as per your preference.

5. Advanced Options

For those who like a little more control over their captures.

Behind the Scenes: Tech Stack 👨‍💻

Keeping things streamlined and effective, Snapshot employs:

• Reactjs with vite: Driving our user-friendly frontend.

• Amplication : Powering our backend operations. If you're new to Amplication, it's a fantastic platform that simplifies backend development, offering a versatile suite of tools to enhance and speed up the development process. It's particularly favored for its intuitive handling of data models and ease of integration.

How It Works ⚙️

I am not going to explain all of the technical stuff here. Instead, I will take you quick work through the web app.

At first, You need to enter the URL of the website where you want to take screenshots then, as per your requirement fill up or tick the advanced option and just hit the Take a shot button. then you are redirected to the image viewing page and there will be a download button by clicking it you can download the image. You get one more button to save the image if you are logged in.

But Sometimes, The Download button doesn't work. So, you have to right-click on the image and click on save as option to download it.

You can also access the collection of your saved screenshots by clicking on the button My collection on the top-right side of the navbar. At last, You can download or delete the saved screenshot by hovering them.

What I learned ?

Every project brings new lessons, and Snapshot was no different. Here’s a dive into the specifics:

• Mastering Styling with Custom CSS:
  While working on Snapshot, my skills with custom CSS grew leaps and bounds. I experimented with layouts, played with colors, and ensured the tool was as visually appealing as it was functional.

• Discovering Amplication:
  This was my first rendezvous with Amplication, and it's safe to say I'm impressed. It wasn’t just about learning a new backend service; it was about understanding its unique features and capabilities. The seamless data handling, intuitive setup, and scalability options were particularly eye-opening. I've been familiar with other backend platforms before, but Amplication stood out with its user-friendly approach and robust functionality. I can definitely see myself integrating it into future project.

Links

Source code: Click here

Amplication Docs: Click here

For the authentication using amplication, I got reference from tutorials provided by amplication. Click here

Conclusion

Building Snapshot during Hacktoberfest was a unique blend of challenges and discoveries.

Hacktoberfest, as we know, is a celebration of open-source contributions. Engaging with the open-source community during this event made the creation of Snapshot even more enlightening. Not only was I navigating my own learning curve, but I was also incorporating feedback, ideas, and sometimes even code from contributors worldwide.

Discovering Amplication amidst Hacktoberfest was like hitting a jackpot. I was already in the thick of coding and collaboration, and adding a new tool was challenging. But as I dug deep into Amplication, the community's support and shared experiences made the journey smoother and more insightful.