Key concepts and intentions

For Connections Lab project 2, I create a cloud collector, which allows users to collect the clouds they find in their daily lives and store the data of the clouds. Our atmosphere is like a giant ocean in which we reside. We may think of ourselves as living on the ground, but we still inhabit the atmosphere, just like sea creatures do the water. The application is calling out to daydreamers that it is time to get our heads in the clouds.

Production decisions

✏️ Wireframes

Make it stand out

Whatever it is, the way you tell your story online can make all the difference.

⛓ Prototypes

The application contains two main parts, the Home and the Play. There is a button in the upper right corner, which allows users to switch the interfaces.

On the Home page, users can input the info of the cloud they found, including what the cloud looks like, when and where the cloud is collected, and an image of the cloud. Then clicking on the collect button, it will show "Your cloud has been collected!" and the info just entered will display on the page. There are two buttons at the bottom - if users click on the "Collect 1 more cloud" button, it will bring them back to the Home page; if users click on the right button, it will take them to the Play page. Also, users can click the button in the upper right corner to go back to the Home page.

📲 Mobile version

An early stage of responsiveness.

Major challenges and solutions

The app.js under the home_page folder allows the app to store the description, date, location, and images from the users' input. It is a little different between the storage of images and the storage of description, date, and location. First, there is a global variable initialized as imgdataUrl. Then, the function from Line 34 allows the app to get an address or a URL of the image, and store it on Line 15. In this way, all users' input including texts and images can be added to the database.

After a user's submission, I hope to get the info displayed on the page. Thus, on Line 8 in the index.js, it will automatically insert a timestamp along with the user's input and then send the latest data route, which will sort the timestamp of all images and return the latest array. Details can be viewed from Line 34 to 48 in the index.js file. After that, in the app.js file under the display_page folder, it will fetch the latest data route and display the cloud info entered by the user. This is basically the implementation of the storage function on the Home page.

Next steps

Since the app can get a cloud database through the usage of the Home page, I would like to work on the Play page as a next step so that multi-users could utilize the database and interact with one another in real-time. My current idea is that users will see a random cloud image from the stored data and enter their guesses into the text box. The first user who enters an answer that matches the stored "Description" will win the game. The next page will show the winner's name along with the info of the cloud that was randomly selected in the round of the game. Also, there are two buttons at the bottom - the left one leads us to the Home page; the "play 1 more round" button brings us back to the Play page.

References and resources

How to fix the request entity too large error in Express
NeDB TimestampData
Sort the elements of an array and return the sorted array

// Thanks to YG for the help of debugging and researching useful resources