Repository for Delta, a webpage designed for our CS 35L class during Fall 2022 at UCLA. Delta is an application that helps the user organize their life in a friendly, customizable, and digital way–similar to a physical bullet journal, to help students stay organized, and manage their stress.
The frameworks we used include React. The runtime environment we used include node.js. The languages we used include JavaScript and HTML/CSS. The packages we used include react-router-dom, firebase, and unsplash-js. We used the Firestore Database on Google Firebase to store user data. We also used the Google Fonts Database to select our fonts.
We'll use a really common Node.js project workflow + Npm! First, let's clone our repository, and install all of our npm dependencies:
git clone https://github.com/esha-sidhu/Delta.git
cd Delta/delta
The instructions to install Node.js will be different based on which platform you're running. It's heavily advised to install your Node.js using NVM (Node Version Manager) because it's easy to manage a standardized version and update it as needed.
Instructions for installing NVM on macOS and Linux (including WSL) are here.
At this point you can run nvm install. Assuming you've already cded into the correct directory as mentioned earlier, this will download the LTS (Long-Term Support) version of Node.js for you. Then, run nvm use to make sure you've switched to the right version; if it tells you Now using Node v16.13.2 or something similar, you're good to go!
If you're on Windows, you can use NVM for Windows, a separate version manager whose installation instructions can be found here. Once you've done that, you can run nvm install 16.13.2 to install the LTS version of Node.js, and nvm use 16.13.2 to switch to it.
If you don't have npm installed...
npm install --global npm
Then install our dependencies!
npm install
To start our app, you just need to run npm start!
npm start
Open http://localhost:3000 to view it in your browser. Now you can sign in with your google account, manage your todo list, track your daily habits, and log into your own personal journal. Additionally, you can choose and add images along with the option to choose from a variety of fonts and background colors!
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
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.
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.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify