Build a “What I Did Today” app

Creating a “What I Did Today” app can be a fun and rewarding project. The goal of the app is to allow users to easily document their daily activities, reflect on what they’ve done, and potentially track their progress over time. Here’s a step-by-step guide to help you build this app, covering both the conceptual and technical aspects.

1. Define Key Features

Before diving into the technical details, decide on the core features of your app. Here’s a simple list:

• User Registration & Authentication: Users should be able to create an account and log in securely.

• Activity Logging: Users can write about the things they did today.

• Date-based Entries: Each entry is associated with a specific date.

• Editing & Deleting Entries: Users should be able to update or remove any daily entry.

• Search/Filter Entries: Users should be able to search their past entries by date or activity keywords.

• Calendar View: Users could get an overview of the entries by viewing them on a calendar.

2. Choose the Tech Stack

To build this app, you’ll need to choose a tech stack. Here’s a suggestion for both front-end and back-end:

• Front-End:

  • React.js: For building dynamic and interactive UIs.

  • CSS (with or without a framework like TailwindCSS): For styling the app.

  • React Router: For managing navigation between pages.

• Back-End:

  • Node.js with Express: A JavaScript-based back-end to handle API requests.

  • MongoDB: A NoSQL database for storing user entries, authentication data, and more.

  • JWT (JSON Web Tokens): For user authentication.

• Optional:

  • Firebase: For quick and easy user authentication and real-time database integration.

3. Set Up the Project

Front-End (React):

1. Initialize the React App:

   • Open your terminal and run the following commands:

     bash
     CopyEdit
     npx create-react-app what-i-did-today
     cd what-i-did-today
     npm start
     

2. Install Dependencies:

   • Install the necessary libraries:

     bash
     CopyEdit
     npm install react-router-dom axios
     

3. Basic Folder Structure:

   • src/

     • components/: UI components like the entry form, login form, calendar view.

     • services/: API calls to communicate with the back-end.

     • App.js: The main component.

4. Set Up React Router:

   • Use React Router to navigate between pages (Home, Login, Entry Page, Calendar View).

   js
   CopyEdit
   import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
   
   function App() {
     return (
       <Router>
         <Switch>
           <Route path="/login" component={Login} />
           <Route path="/calendar" component={Calendar} />
           <Route path="/" component={Home} />
         </Switch>
       </Router>
     );
   }
   

Back-End (Node.js & Express):

1. Initialize Node Project:

   • In a new directory, run:

     bash
     CopyEdit
     npm init -y
     npm install express mongoose jsonwebtoken bcryptjs cors dotenv
     

2. Set Up Express Server:

   • Create a basic server in server.js to handle API requests.

   js
   CopyEdit
   const express = require('express');
   const mongoose = require('mongoose');
   const cors = require('cors');
   
   const app = express();
   app.use(cors());
   app.use(express.json());
   
   mongoose.connect('mongodb://localhost/whatididtoday', { useNewUrlParser: true, useUnifiedTopology: true })
     .then(() => console.log('Connected to MongoDB'))
     .catch(err => console.log('Error connecting to MongoDB:', err));
   
   app.listen(5000, () => {
     console.log('Server running on port 5000');
   });
   

3. User Authentication:

   • Create a simple user model with Mongoose for user registration and login.

   js
   CopyEdit
   const bcrypt = require('bcryptjs');
   const jwt = require('jsonwebtoken');
   
   const userSchema = new mongoose.Schema({
     username: { type: String, required: true },
     password: { type: String, required: true }
   });
   
   userSchema.pre('save', async function(next) {
     if (!this.isModified('password')) return next();
     this.password = await bcrypt.hash(this.password, 12);
     next();
   });
   
   userSchema.methods.matchPassword = async function(password) {
     return await bcrypt.compare(password, this.password);
   };
   
   const User = mongoose.model('User', userSchema);
   
   module.exports = User;
   

4. Create Routes for Authentication and Entry CRUD:

   • Routes for creating a new user, logging in, and adding/retrieving entries.

   js
   CopyEdit
   const express = require('express');
   const User = require('./models/User');
   const Entry = require('./models/Entry');
   const jwt = require('jsonwebtoken');
   
   const router = express.Router();
   
   // User registration
   router.post('/register', async (req, res) => {
     const { username, password } = req.body;
     const user = new User({ username, password });
     await user.save();
     res.status(201).json({ message: 'User created' });
   });
   
   // User login
   router.post('/login', async (req, res) => {
     const { username, password } = req.body;
     const user = await User.findOne({ username });
     if (!user || !(await user.matchPassword(password))) {
       return res.status(400).json({ message: 'Invalid credentials' });
     }
     const token = jwt.sign({ id: user._id }, 'secret', { expiresIn: '1h' });
     res.json({ token });
   });
   
   // Create a new entry
   router.post('/entry', async (req, res) => {
     const { userId, content, date } = req.body;
     const entry = new Entry({ userId, content, date });
     await entry.save();
     res.status(201).json(entry);
   });
   
   // Get entries by user
   router.get('/entries', async (req, res) => {
     const entries = await Entry.find({ userId: req.user.id });
     res.json(entries);
   });
   
   module.exports = router;
   

5. Use Middleware for Authentication:

   • Protect routes with JWT authentication.

   js
   CopyEdit
   const jwt = require('jsonwebtoken');
   
   const protect = (req, res, next) => {
     const token = req.header('Authorization');
     if (!token) return res.status(401).json({ message: 'No token, authorization denied' });
     try {
       const decoded = jwt.verify(token, 'secret');
       req.user = decoded;
       next();
     } catch (err) {
       res.status(401).json({ message: 'Token is not valid' });
     }
   };
   

4. Implement User Interfaces

You can create different components for each part of the application:

• Login Form: To authenticate users.

• Activity Form: To log daily activities.

• Calendar View: To display a calendar with activities listed on specific dates.

• Entries List: To view past activities with options to edit or delete them.

5. Style the App

Use CSS or a UI framework like TailwindCSS to give your app a clean and modern design.

6. Deploy the App

Once you’ve built and tested the app, you can deploy the back-end using services like Heroku or Vercel, and the front-end can be hosted on Netlify or Vercel as well.

7. Additional Features (Optional)

• Reminders: Notify users to log their activities at the end of each day.

• Data Analytics: Track progress or patterns in activities over time (e.g., most common activities).

• Dark Mode: Allow users to toggle between dark and light themes.

With this basic structure, you’ll have a fully functional “What I Did Today” app. You can always add more features or improve the app based on user feedback.