Cloud Watching is an app created to track your dreams and browse others' dreams based on topics of interest.
Users can customize their feeds by selecting their topics of interest. Their feed will then only contain dreams tagged with those topics.
Users can create new posts and select how their dream was, create a title, write a caption, and select topic tags.
EJS, JavaScript, CSS, Node.js, Express.js, MongoDB, Mongoose
This app uses EJS to generate HTML using JavaScript, allowing the app to render posts based on users data. For example a user's feed is rendered by checking the users selected tags and rendering posts that contain those tags.
In this app JavaScript is used to 'read' the inner text of the dream type (bad, good, neutral). It will then select a random image (using Math.random) associated with the dream type and set the background image of the post to the random image selected. This allows the user to quickly see the type of dreams on their feed.
Node.js is responsible for the server-side aspect. It uses JavaScript to build scalable applications.
Express.js is a framework for Node.js that comes with lots of features. It is responsible for routing and middleware throughout the app.
MongoDB is the database that stores users' data, such as the data tied to the dream posts and users.
Mongoose is responsible for defining Schema Objects that map directly to MongoDB. Organizing user data this way makes it easy to reference throughout the app.
MVC architecture organizes the app into three components: Model, View, and Controller.
The View component holds all of the ejs files the user sees and interacts with.
The Model component holds all of the Mongo schemas that give structure to our user data. It is responsible for adding and retrieving data from the database.
The controller component acts as the middleman between the Model and View components. The Controller will process requests made through View components and relay requests related to data to the Model component. The model component will then retrieve the data needed and "pass it" to the Controller, which will then interact with the View component to have the data rendered in HTML.