Scooter
Scooter is a simple web app that allows you to create bit-sized code snippets and share it with the world.
The Idea
Last week, i decided i was going to do an interesting challenge which was to build a functional app in a small amount of time using my phone only . Yeah you got it right. This app was entirely built using my android phone and submit it at the end for the #VercelHashnode hackathon. I did so to see how good/uncomfortable it was to build an app on my phone. I ended up building the app in 3 non-consecutive days.
Technologies Used
To build this simple application, i used the following technologies
- React
- NextJS
- GraphQL (apollo-server & apollo client)
- MongoDB
- Vercel serverless functions
- TypeScript
Challenges faced
I won't lie. Creating this app was a little tedious especially the debugging part. But thanks to good error messages from NextJS ( it saved me a little). I couldn't use console.log() to log error to the browser. I had to stick to trial and error every time i encountered an issue. Building this app was pretty fun though ;)
Here are screenshots of me coding the app on phone 😆
Coding the page that shows code snippets
Coding the GraphQL API (serverless function)
The page displaying code snippets
Modal for creating code snippet
Downsides
This app has issues working correctly like :
- Search feature lacking
- You might get an error when loading the snippets page (GraphQL function not responding)
- Bookmark feature
Nonethless, i am going to work on improving it
Experience
Developing this app was a nice challenge and experience in the end. I learned how to use apollo client to do queries and mutations and how to build simple GraphQL servers using apollo server. It was a good practical experience for using serverless functions on vercel along with NextJS.
Here is the live app : scooterapp.vercel.app
Here is the source code : github.com/JosiasAurel/scooter-dev Contributions are welcome, just send a PR
In case you encounter an issue when it fetched the snippets/ or when reloading, sometimes a query might help
Here is the link to the GraphQL API : scooterapp.vercel.app/api/graphql