Storytime is an interactive web platform that allows users to create, share, and explore stories collaboratively. With a user-friendly interface and robust features, Storytime is the perfect place for aspiring writers and story enthusiasts to share their creations with a vibrant community (this was my first full-stack project ever made).
- π Story Creation: Easily write and format your own stories.
- π Sharing: Publish your stories for others to read, comment, and interact with.
- π Exploration: Browse through a vast collection of community-created stories.
- π User Authentication: Register and log in to manage your stories and interactions securely.
- π€ User Profiles: Customize your profile and track your activities on the platform.
- β Favorites: Save your favorite stories for quick and easy access.
The Storytime project was developed over a period of 2 weeks, from design conception to implementation and final testing.
- Website: Storytime Live
Automated tests ensure the reliability and stability of the platform. Learn more about the testing process.
For those interested in exploring or contributing to the codebase.
- Node.js and npm installed on your machine.
- PostgreSQL installed locally or a Supabase account for a hosted database.
-
Clone the Repository
git clone https://github.com/SRamoras/storytime.git
-
Navigate to the Project Directory
cd storytime
-
Setup the Backend
cd backend
-
Install Dependencies
npm install
-
Configure Environment Variables
Create a
.env
file in thebackend
directory and add the following:PORT=5000 DATABASE_URL=your_supabase_postgresql_url JWT_SECRET=your_secret_key
-
Run Database Migrations (if applicable)
npx sequelize db:migrate npx sequelize db:seed:all
-
Start the Backend Server
npm start
-
-
Setup the Frontend
Open a new terminal window and navigate to the
frontend
directory:cd frontend
-
Install Dependencies
npm install
-
Configure Environment Variables
Create a
.env.local
file in thefrontend
directory and add the following:REACT_APP_API_URL=https://storytime-backend-f240.onrender.com/api PUBLIC_URL=https://sramoras.github.io/storytime/ REACT_APP_BASE_IMAGE_URL=https://storytime-backend-f240.onrender.com/uploads/
-
Start the Frontend Server
npm run
-
-
Access the Application
Open your browser and go to http://localhost:3000 to see Storytime in action!
Storytime uses JWT (JSON Web Tokens) for secure user authentication. Below is an overview of the authentication process:
// backend/authenticateToken.js
const jwt = require('jsonwebtoken');
const authenticateToken = (req, res, next) => {
const authHeader = req.header('Authorization');
console.log('Authorization Header:', authHeader);
if (!authHeader) {
return res.status(401).json({ error: 'Access denied. Token not provided.' });
}
const token = authHeader.split(' ')[1];
console.log('Token:', token);
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET);
console.log('Token Decoded:', decoded);
req.user = decoded;
next();
} catch (error) {
console.error('Error verifying token:', error);
res.status(403).json({ error: 'Invalid token.' });
}
};
module.exports = authenticateToken; 5. Access the Application
Open your browser and go to [http://localhost:3000](http://localhost:3000) to see Storytime in action!
This project is licensed under the MIT License.
For more information, feel free to reach out:
- LinkedIn: Diogo Silva
- GitHub: SRamoras