sonnyding1 / cs35l-egg Goto Github PK

View Code? Open in Web Editor NEW

1.0 2.0 0.0 2.13 MB

JavaScript 98.15% HTML 0.21% CSS 1.64%

cs35l-egg's Introduction

CS35L Egg Editor

Egg Editor is a community based Markdown editor, built with the MERN stack.

Features

Profile page: Users can create their accounts using either email password or Google OAuth. They can also view file created by the user, files like by the user, and edit user name.
Edit page: Users can edit markdown files with LaTeX support. There is also a menu bar at the top of the page, which contains many useful features and shortcut keys, such as undo/redo, bold, italics, math...
File management: Users can create new files, browse existing files, delete files, and search file content. Users can also toggle file visibility between public and private.
Community interaction: Users can like and comment on other users' files. They can also view the specifics of each file.

Technologies

Frontend: JavaScript, React, Tailwind CSS, ShadCN UI, React-Router, React-Markdown
Backend: Node.js, Express, MongoDB, Mongoose, Passport, Swagger

Installation

Follow these steps to install and run this project:

Clone the repository

git clone [email protected]:sonnyding1/CS35L-Egg.git

Navigate to the directory

cd CS35L-Egg

Install the dependencies

Starting from this step, you will need to open two terminal windows, one for the backend and one for the frontend. For all the backend commands, you will need to navigate to the backend directory. For all the frontend commands, you will need to navigate to the frontend directory.

For the backend:

cd backend
npm install

For the frontend:

cd frontend
npm install

Set up the environment variables

If you are a contributor, visit our Google Drive to get the .env files for frontend and backend. If you are not a contributor, you will need to create your own .env files. The backend .env file should be placed in the backend directory, the frontend .env file should be placed in the frontend directory.

For the backend:

GOOGLE_CLIENT_ID=[your Google client ID from Google Cloud Platform]
GOOGLE_CLIENT_SECRET=[your Google client secret from Google Cloud Platform]
SESSION_SECRET=[your session secret]
MONGO_URI=[your MongoDB URI]

Run the project

For the backend:

npm run dev

For the frontend:

npm run dev

Authors

Egg Editor is developed by a group of UCLA students in CS35L Spring 2024. The contributors are:

Sonny Ding
Thiha Myat
Taha El-Halabi
Wai-Sann
Emily Pham
Gabriel Jiang

cs35l-egg's People

Contributors

Stargazers

Watchers

cs35l-egg's Issues

[feature] add menu bar to edit page

To ensure we have enough space for all the features for editing a document, consider adding a menu bar on edit page. Consider using this component from ShadCN.

[feature] landing page

Optionally, we can have a landing page for all logged out users to see. The landing page should contain a hero section, some sections that display our features, and a call to action section that redirects users to visit the community page, and also prompt them to sign up or log in.

[feature] add export to PDF

this one is purely for fun lol

[feature] backend file model

The file model should have: file name, content, username (the name of the owner of the file)

[feature] edit auth routes google endpoints to add and validate users

Refer to the user model, and write logic inside google endpoints to create new users or get user info. Also make sure to add usernames into session.

[fix] nav bar rework

We can make the nav bar buttons uniform, move "Egg" to the left to make space for the user profile on the right.

[feature] 404 page

We may have a better 404 page.

[enhancement] build and publish docker images, deploy on cloud services

we might not do it due to time or money constraints though

[feature] user profile page

A user profile page should be a form that allows users to edit their profile pictures and names for now.

[feature] Editable file name

Make a file name in edit page, and make that file name editable. For now, save the file name in a useState, and on save to a local file, save the file using that file name.

[feature] table component for displaying files

The table component will be used in home page, community page, like page. Look into Tanstack table.

[enhancement] remap save shortcut to save to backend

When the backend file API endpoints are finished, remap the edit page "save" shortcut key to save the file to backend. Also add "download", which actually downloads files to local.

[feature] add undo/redo shortcut keys

Implement undo/redo shortcut keys in edit page. This might be more complicated than it seems, we might have to implement a "kill ring" of some sort along with the shortcut keys. Also, when a user deletes 3 words by pressing and releasing delete key 2 times, does that count as 1 operation that can be undone? We might need to look into how to determine what exactly is 1 operation.

[feature] comment API endpoints

CRUD operations for the comment model, including:

create a new comment
get all comments of a file
update a comment
delete a comment

[feature] nav bar user profile

Have a circular user profile if the user is logged in. On clicking the profile, it opens a dropdown that shows options for "profile" which links to a profile page, and "logout" which calls the logout function from the backend. If the user is not logged in, display 2 buttons, log in and sign up, respectively.

sonnyding1 / cs35l-egg Goto Github PK

cs35l-egg's Introduction

CS35L Egg Editor

Table of Contents

Features

Technologies

Installation

Clone the repository

Navigate to the directory

Install the dependencies

Set up the environment variables

Run the project

Authors

cs35l-egg's People

Contributors

Stargazers

Watchers

cs35l-egg's Issues

Recommend Projects

Recommend Topics

Recommend Org