Most apps are related to their sites which describe and market the experience. This is more of a design item to create a more visually appealing page that touts the app as opposed to being the app.

Think of this as a page which is:

• Visually appealing
• Describes the App succinctly
• Contains prominent Calls To Action which prompt the user to sign up for the service or launch the app.

As an example:

• Splash page:
  

• App itself:

Consists of creating the main page for viewing all blog posts ("Stories") in a grid layout as clickable squares.

This will be one of the most used endpoints, handling blog posts when they are created.

Acceptance criteria

• Create a POST endpoint at /api/blogpost which takes the following post body:

{
  title: string, required, validate short-ish length
  body: string, required,
  creationDate: generated on the server side, so no one can mess with it.
  author: string required, userid, pulled from user object on the backend. (current authenticated user, so can't be spoofed)
}

• Validates the above data
• Calls into a service which stores in the database and returns blogpost entry _id to the frontend.

Simple chore to add the material UI react dependencies.

This Epic consists of creating the functionality that allows a user to write a blog post and save it.

• Create a form component that allows a user to type in a blog post title, blog post body
• Create a frontend API call that POSTs the blog data to the backend
• Create a backend route that handles the POST request and stores the blog data in the database.

Add content to the readme file which describes the project and how to contribute to it.

Acceptance criteria

• Describe how a potential contributor can get the project running for development aka, how to clone, install dependencies, and run it.
• Add a section which describes what the project is attempting to be. Describe the MVP, or what minimal feature set is required for the app to function

• This will be the main page for viewing all blog posts ("Stories")
• Use MUI with Paper and Accordions to display all blog posts (Stories) -> Eventually these will be displayed using a grid layout and linked as clickable squares with images

This Epic consists of creating the functionality that allows a user to UPDATE a blog post and save it.

Quick fix

Create a form component that allows a user to type in a blog post title, blog post body.

Acceptance criteria

• A user can type text into clearly labeled text fields and see a visual representation of what the blog post will look like in real time.
• The title and body data will be stored in state to allow for easy manipulation and access for network requests
• A button which will call an API function that posts the form data when clicked, or when the form is submitted. This API functionality will be handled in a separate work item.

Only have one left drawer. Need to remove any anchor reference from the boilerplate example.

We want to use Context for state management, so this involves setting up the code that addes our global state and wraps the app in a . There may need to be more discussion around what our initial data structure looks like; this depends on functionality of the app. My initial thoughts are that we need authentication + user data, as well as blog post data.

Acceptance criteria

• Create a user context which will serve us for authentication and a User's metadata; aka name, _id, email, etc.
• Create a Blog Content context which will hold an array of blog post metadata. This might include title, date of publication and content.

NOTE: since the data structure will evolve greatly as the app progresses, this should be taken as a "best guess" ticket and we shouldn't get hung up on perfection.

Create a frontend API call that retrieves all stories from the backend

This work is to create a data model for a blog post.

Acceptance criteria

• Create a Blog post model in mongoose which has the following properties:
  • Title
  • Date posted
  • Body
  • Author (should be related to another model which describes users)

Add a property for an image in the Mongoose Schema model

Add a "Left Drawer" which acts as a navigation base. Examples of this can be seen for desktop and mobile here: https://material.io/components/navigation-drawer

This should be relatively simple to achieve using components from the Material UI library: https://material-ui.com/components/drawers/

Acceptance criteria

• A left side navigation panel which can be triggered to expand from a hamburger icon on small screens
• A persistent left panel on larger screens
• Links to various pages in the app. This will evolve over time and need to be discussed, but inital links that make sense to me are home: / and search /search

This will contain different components depending on which page is rendered and whether a user is logged in. This should include a Storie logo.
Splash && not logged in:

• Link to Stories page
• Login
• Signup

Splash && logged in:
add

• Username (with user icon)
• Create Storie (create blog)
• Logout

Stories && logged in:
add

• Search Field

Add functionality that allows a user to UPDATE a blog post and overwrites original content in the db

We need a service on the backend which reads protected environment variables (set in the deployment platform, or in .env.development files which are NOT checked into git), and authenticated with cloud atlas to read and write data. This is a rather abstract idea that we'll want to vary based on the environment we're in.

Acceptance criteria.

• We want a way to differentiate between production and development databases. This can be done in several ways, but most commonly by looking at process.env.NODE_ENV
• We only want to write to development databases if NODE_ENV !== 'production', therefore we might prefix all these DBs with dev_
• A common way of handling stuff like this can be done with the config package: https://www.npmjs.com/package/config. This leads to multiple configuration files such as development.js, staging.js, production.js which hold different config values for those environments.