LeetCode for Salesforce—An incredible API application with React.js and the Tooling API
Welcome to another entry of the Under the Code series, where we explore how other Salesforce devs created incredible Salesforce API applications.
This time, I interviewed Mehdi Maujood, who created an incredible application called ApexSandbox.io. If you haven't tried this app, it's basically a LeetCode for Salesforce, allowing apex newbies and experts alike to practice their programming and logic skills.
Anyway, let's see what we can learn from Mehdi's experience.
Why did you create this app?
I wanted to provide a place for aspiring Apex developers to practice Apex in an environment similar to LeetCode.com
How much planning/thinking did you do before starting to code?
Even though I have done web development a lot in my past career, I had to do a good amount of research on technologies, architecture, etc. before starting to code. I would say around several days worth of research before starting to code.
How did you choose which technologies to use (programming language, frameworks, etc)?
I knew I wanted to use Heroku because it does a great job of managing infrastructure and deployment. No worrying about server configuration or deployment process. The language I wanted to use was JavaScript because I'm familiar with it. I ended up following an Express + React + Heroku tutorial to get an experimental throwaway app running just to get my hands dirty, and then started writing my app on the same stack.
At a high level, what is the architecture of this app? What are its components?
This app is backed by PostgreSQL as the database, Express.js as the back-end, and React as the front-end. Within the Express backend, I had to write separate utilities/layers for database management, session state management, interfacing with Salesforce, etc.
How did you learn all the technologies required to create this app? Was this pre-existing knowledge or did you learn specifically to create this app?
Some of it was pre-existing knowledge because I was a web developer in my past life, but I had to learn express, react, and had to catch up with modern javascript. I followed tutorials online, went through a React course on Pluralsight, and followed an EXCELLENT tutorial on https://react-tutorial.app/ to learn about React. I also looked at other full-stack open-source repositories like Salesforce Workbench and HappySoup.io to see how they were doing things.
Did you use a css framework? How much css did you write yourself? Any lessons learned?
I used the Lightning Design System (LDS) because I was already familiar with it. I wrote very little CSS myself and relied mostly on what the framework offers.
One lesson for me was that LDS does NOT have components designed for websites such as mine, and I was not skilled enough in CSS to add those myself. Examples of things I gave up on: a footer that stays at the bottom and a border on the navigation bar.
If I were to do it again, I would choose a CSS framework designed for this kind of stuff. Maybe Bootstrap would have been a better choice.
How did you come up with the UI? Did you review existing apps for ideas? Do you have suggestions to our readers on how to create a simple and nice UI?
I did review existing apps and did some wireframing with a pen and paper as well. Some of the layout is similar Leetcode although I made choices to keep it as simple as possible for the minimum viable product. My suggestion would be to wireframe first, pick a CSS framework, and just build it out using HTML and CSS as a prototype first before going for any code.
How do you handle authentication to the user's Salesforce org?
I used an open-source library JSForce to handle authentication.
Any big lessons learned from creating this app?
Just HOW IMPORTANT a one-click deployment process is. Something I really miss in the Salesforce world. At the same time, I got to appreciate how easy Salesforce makes some things. I had to write so much code for user management, session state management, database connectivity, etc. that we don't even think about
What advice would you give to other devs looking to create a fullstack salesforce app?
Make sure you build out toy apps before building the full thing you want to build. Start with mastering HTML and CSS (w3schools.com is great for this). Then, focus on some JavaScript and SQL.
Once you have those basics down, follow tutorials for full-stack apps. Ask questions, find a mentor, experiment, and take your time. Making web apps can be very complex. Things that are just one click in Salesforce can often be multiple days of planning resulting in hundreds of lines of code, especially if you're new to web development.
But I can promise: What you learn will be a great for your career. It will give you a new perspective about Salesforce and it will open up a LOT of future doors because so much out there (including Salesforce) is built on the web
How did creating this app positively affect your career? (speaking at sf events, new job opportunities, networking, new projects, etc.)
It helped increase my network a lot. I connect with someone new every day just because of the website I built, and it also gave me a great topic to speak about at events.
I loved this one, so much detail and so much to learn about creating Salesforce API applications! Thank you Mehdi!
Do you have any comments or feedback? Leave a comment! I read each and every one of them!