The image editing process is not always about how heavily your edited photos are, or even if the software that will be used is a professional one. So, in this article, I'm going to show you how this simple side-project that I created can help you (and me) to solve this problem.
TL;DR
I present you with a simple web app created to make your (and my) job easier on photo editing.
An explanation about the development process and some quick tips (that you will love)
Also, I write about its major features, mission, vision, and values during the developing process.
To end with a flourish, you can see an awesome repository and Product Hunt (don't miss this).
About Edite
Edite was built, in the beginning, to solve most of my problems (and also probably yours) when trying to edit photos. After a time, it came to my head how easy can be if doing it in the right way. So, nothing better than writing about this wonderful project for the #ChristimasHackathon.
**Note: ** Edite still on its alpha-beta transition.
📝 Development process
Something I'm always carrying about is to divide by the major features that will be released at a specific time, as well, to understand better how Edite works.
🎨 Design
Probably you can agree that it's not just me, but when it is about designing an app, Figma is my first choice.
- The logo
Usually, when I'm thinking about my app branding, I take a little while, cause I want something that makes the user recognize what is the app about. But if it takes too much time (depending on the release date), there's a quick trick (actually, a website) that can help with it: Namelix (just don't tell anyone 🤫)
At the end, Edite looked like this:
As you see above, there are three dashes representing an "E" (extending to Edite), and the cubes (at the corner), resizing it.
- Screens
On the other side are the screens: (probably) one of the most difficult and that takes longer time, once I had to think about the coding process (making it easier for me) and the user experience (what can make things a little complicated). But something that can take me away from being stuck like this is called Dribbble (and Google, for sure).
Eventually, Edite's screens seemed like this:
Note: The images above are not being previewed because the size is quite large (preventing a bad reading)
⚛️ Front-End
As a JavaScript developer, I'm always focusing to build my applications using React.js (while still learning TypeScript) and it is perfect to increase performance, SEO, and UX.
- 📂 Project structure
To make everything easier during the development, I always use a pattern for my folders structure:
publicimages→ Images that are used publicly and not processed.locales→ Translations for each language used on the app
srcassets→ SVG icons.components→ React and styles (CSS-in-JS) components that are used across the app.i18n→ Internationalization and localization.services→ API consuming.styles→ Global styles and themes variables.__tests__→ All tests written using the@testing-libraryandjest.
Performance, Accessibility, and SEO
It is essential not just to think about the coding process (1. Project Structure), but also about the many visions that a client can have. So, to solve this problem (in general, not everything), I always use the Developer Tools and Lighthouse.
In general, the Edite's landing page and Web app had these marks:
🌳 Services
To finish this quick explanation about my developing experience, the services. This part is pretty simple, once they are not hosted/created by myself (in general).
In the Edite's services case, it is possible to see just a simple image upload preset using Cloudinary, where the user can (on the FE) edit the image, then download it (working)
Hint: Read 'till the end of this article and you'll find more about the service and how to use it locally.
🤔 But... Why use it?
Major features
⌛ Save your time from installing apps.
🌎 Editing on the language you feel better.
🌈 Use the theme you prefer
🌱 Share your best shots with an awesome Discord community.
Edite carries about...
🧭 Make the users' job easier on image editing, providing simple tools, but also powerful.
🔭 Incentive people to explore photo editing, making it easy and simple.
⚖️ Build in a minimalist way.
GitHub Repository
🌱 Edite still on its alpha-beta transition, but it is already documented on GitHub, and waiting for your help.
Product Hunt
🙏 I am excited to see your thoughts and feedback about Edite.
🎉 Acknowledgments
It's not always enough to thank the Daily.dev organization for inspiring and making the GitHub documentation better.
Thank you for reading this article! And if you want to be updated with the best content, subscribe to my newsletter and see you in the next one!*