This is the first web app I made. I thought I'd outline my thought process here, in case you have questions about decisions I made when coding. This app is a learning exercise; it wasn't intended for public use (yet). I'd appreciate your feedback, so feel free to email me at firstname.lastname@example.org
Stack: NodeJS, Express, MongoDB
The purpose of creating this app was for me to get familiar with the following:
Try to post an event or edit an event to see front-end data validation in action.
Objective: Check that
Coding this was pretty straightforward. The main challenge was deciding what is and what isn't valid user input. Examples:
Start Time vs End Time
Initially, I set the end time field to required, and wrote code to ensure that the start time of the event was BEFORE the end time. This makes sense, but the following questions arise:
I opted for simplicity and just made the end time field not required; I decided that ensuring that the end time field makes sense is the user's responsibility.
Is the user allowed to type "Free"? Does the user have to type $ before the cost? Should I allow the user to type something like "$10-$15"? These are important questions. Again, I opted for simplicity and allowed the user to type anything; hence "event cost" making sense is the user's responsility.
For the front end, I wrote my own validation methods. For the backend, I decided to use a validator called indicative. I really liked its simplicity. I could have used the same frontend code for backend validation, but decided to use indicative because
Regarding the second point, I did find two bugs in the indicative library. Basically frontend validation for date was passing, but the backend validation was failing. I realized there was a bug in how indicative was comparing dates (fixed it).
I wanted to imitate BlogTo's image upload functionality. I could have used Dropzone.js or another library (and it might have been better to do so), but I wanted to write the code from scratch (just as a learning exercise).
I deployed my app to Heroku, and Heroku doesn't allow for image storage. After some research, I decided to use Amazon S3 for image storage. I used the npm package multer-s3 to handle image upload to Amazon S3. It was pretty straightforward.
Try to post a new event, and enter a Canadian address in the "Search for your address here" text field.
How well this works depends on the quality of data google has. I considered using Canada Post's API since I assumed they'd have better canadian address verification functionality, but since its not free, I decided to stick with google places API.
When I was done making the app, I had to choose between 3 options:
Obviously, I opted for the third option
The main challenge was creating random valid Canadian Addresses. Although I could use random text for event title, description, url etc. (see faker) , I needed to use actual canadian addresses (in order for the google Maps functionality to work). Hence I had to write a script that uses google places API to generate random valid canadian addresses.
Also, you can find my code here