Coffee Cake ☕
Coffee Cake is a sample web app built with React and Stream's React Components. General data such as a users name, password, and email address are stored in MongoDB, whereas other data is persisted in Stream. Server side handling is processed by AWS Lambda using the Serverless framework.
For simplicity, Coffee Cake does not make use of Redux. All API calls are made via Axios. Calls to Stream are handled by the Stream JS client, and login with Google is facilitated by Simple Google Auth.
Note: All social functionality is provided by Stream's React Components, a 100% free component library offering access to dozens of React components with various functionality.
- Status updates (similar to Facebook)
- OG scraping
- Image uploads
- Video & GIF support
Note: Additional functionality and implementation details provided by Stream's React Components can be found here.
If you'd like to create a custom version of Coffee Cake locally, you'll need to setup the following free accounts:
Once you have provisioned the above accounts, please create a
.env file in the root directory of the project with the following:
NODE_PATH=./src REACT_APP_STREAM_ID=YOUR_STREAM_APP_ID REACT_APP_STREAM_KEY=YOUR_STREAM_API_KEY REACT_APP_GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID REACT_APP_GOOGLE_CLIENT_SECRET=YOUR_GOOGLE_CLIENT_SECRET REACT_APP_GOOGLE_PROJECT_ID=YOUR_GOOGLE_PROJECT_ID REACT_APP_API_ENDPOINT=YOUR_SERVERLESS_API_ENDPOINT
Note: You will need to deploy the
serverlessdirectory with the
sls deploycommand. After deploying to AWS, you will then need to ensure that the AWS Gateway endpoint is live. For further instructions, please refer to AWS or Serverless.
You will also need to set the following environment variables in your
serverless.yml file, located inside of the
DB_URI: YOUR_MONGODB_URI DB_NAME: YOUR_MONGODB_DB_NAME STREAM_ID: YOUR_STREAM_APP_ID STREAM_KEY: YOUR_STREAM_API_KEY STREAM_SECRET: YOUR_STREAM_API_SECRET
Uploading Code to AWS Lambda via Serverless
The easiest way to upload to Lambda is to use the Serverless command. Assuming that you have configured the AWS CLI with your credentials and installed the Serverless CLI with
npm install -g serverless, you can run the following command:
Note: If you'd like to run your Lambda locally, you can bypass the deployment to AWS Lambda by running
yarn start. This will mock the AWS Lambda services, allowing you to use the service on port
Starting Coffee Cake
Coffee Cake was bootstrapped with Create React App, allowing for fast and easy development. The app has not been ejected and I don't advise doing so. With that being said, you can run
yarn start to kickoff the app on port
3000, making it available locally at
As Coffee Cake is an experimental application to demo the functionality of Stream's React Components, additional features will be added to the app in the future. Coffee Cake is also open-source, so please feel free to contribute to the project with PR's. Here are a couple of things that could be implemented by you in Coffee Cake:
- Profile Page (with a list of posts that the user created)
- Edit Profile Page (ability to update profile information – e.g. username, name, bio, password, etc.)
- Hashtags (support Stream's built-in support with a page to view all posts with corresponding hashtags)
- Notifications (use Stream's React Component Notification dropdown to display likes, posts, and @mentions)
- Coffee Cake Demo
- Stream Documentation
- Stream React Component Documentation
- MongoDB Atlas
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
Note: this is a one-way operation. Once you
eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can
eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except
eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use
eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.