Full-stack React app built with Typescript, Bootstrap, Apollo client on the frontend, and NodeJS/Express, Typescript, Apollo server, and MongoDB/mongoose on the backend.

Overview

Event Scheduler App

This project was bootstrapped with Create React App.

Event Scheduler is a React app that allows users to create events. An event can be anything, such as a sport event, team meeting, personal note, etc. An event consists of title, start and end date/time, and description. All events are public by default (visible to everyone). They can also be private (only visible to you) by checking the private checkmark.

You can only edit or remove an event if you're the owner of that event.

Demo 🎥

Tech Stack

Frontend

  • React
  • Typescript
  • Bootstrap
  • Apollo client
  • JS cookie

Backend

  • NodeJS with Express
  • Typescript
  • Apollo server express
  • JSON web token
  • MongoDB with mongoose

APIs implemented using GraphQL

Run app locally

In the project directory, you can run:

npm start

Runs the backend and frontend apps simultaneously in the development mode.\

Or if you prefer running the apps separately by running start:web and start:server in separate terminals.

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.

Current functionality

  • User signup and login
  • Create, update and delete events
  • Make events as private (only visible to creators)
  • Session expiry warning (displayed when being idle for 3 minutes after logging in)

Coming soon

  • User profile
  • Search & filter events

Run unit tests

coming soon...

Run E2E tests

coming soon...

Author 📚

Ahmed Alatawi

Comments
Owner
ahmed
JavaScript code master, and open source contributor. Overall extreme techno-enthusiast and scholar.
ahmed
Fyodor Simonov 3 Apr 15, 2022
QABAS AL ANI 1 May 29, 2022
An easy and straight forward full-stack web application boilerplate using Node.js Express as backend and React as frontend.

An easy and straight forward full-stack web application boilerplate using Node.js Express as backend and React as frontend. All packages are structured as Yarn Workspaces and written in Typescript. In addition, the web application can be built as Docker image using a multi stage built supported Dockerfile.

null 22 Sep 18, 2022
MERN Stack App built with React, Redux, NodeJS, ExpressJS, MongoDB, and deployed to Ubuntu Server on AWS EC2 Instance

MERN Stack App built with React, Redux, NodeJS, ExpressJS, MongoDB, and deployed to Ubuntu Server on AWS EC2 Instance. JWT Authentication – Hook Up with ASP.NET Core 3.1

Christotle Agholor 3 Mar 5, 2022
CRUD App using MERN Stack, it uses ReactJS for Front-end, NodeJS, Express For the Backend and Mongo DB as database!

Book Collection List ?? Demonstration of the application | Features | Technologies used | Application installation ?? Demonstration of the application

Victor Lira 33 Nov 20, 2022
A FULLSTACK Web Application built using MERN Stack (MongoDB, Express, React, Nodejs)

Socialize This is a FULLSTACK MERN Website. This Website uses Reactjs on the Fro

Shubham Patil 29 Oct 25, 2022
winwiz1 154 Oct 20, 2022
Full Stack tutorial using ReactJS, NodeJS, Express and MySQL

Run this project If you want to try the finished project: Go to Start with MySQL to create the database Download the project Go to the client folder a

Carlos Puente 1 Apr 15, 2022
Fullstack open source Invoicing application made with MongoDB, Express, React & Nodejs (MERN)

arcinvoice.com MERN Stack Invoicing Application Built with the MERN stack (MongoDB, Express, React and NodeJS). Introduction Key Features Technologies

Panshak Solomon 1.3k Nov 19, 2022
A demo repo to dockerize React Frontend(using Create React App) and Express Backend

This is a Demo Repository to dockerize a React frontend and an express backend in a single container. The two important files are: Dockerfile contains

Raghavendra Kaushik 7 Nov 2, 2022
A ready to customize project to make a nice webapp using Node.js (Express.js) for the backend and React with Typescript and Redux for the frontend.

A ready to customize project to make a nice webapp using Node.js (Express.js) for the backend and React with Typescript and Redux for the frontend.

Elia Lazzari 3 Mar 16, 2022
Boilerplate app for full-stack MERN app with Create React App client toolchain. Uses JWT for auth.

Boilerplate app for full-stack MERN app with Create React App client tool chain. Includes React, JWT authentication, Mongoose/MongoDB, Apollo Server/Client, and ExpressJS.

John Desrosiers 5 Feb 2, 2022
Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

Full Stack boilerplate with JWT Authentication - Built with React, Typescript, Node, Express, GraphQL, PostgreSQL, Redis, and Webpack

Scott Jason 7 Sep 21, 2022
Buzzer Full Stack Development Assessment uses React and NodeJS to mimic social media functions

Buzzer-Full-Stack-Development-Assessment This project is a coding challange prov

null 2 Jan 16, 2022
updated frontend template for full stack evm-based dapps. tools: typescript, hardhat, ethers, solidity, react

updated frontend template for full stack evm-based dapps. tools: typescript, hardhat, ethers, solidity, react

Steven Li 0 Oct 31, 2021
Create-t3-app - Interactive CLI to quickly set up an opinionated, full stack, typesafe NextJS project using the T3 Stack

create-t3-app Interactive CLI to quickly set up an opinionated, full stack, typesafe NextJS project using the T3 Stack Usage npm npx [email protected]

T3 Open Source 9.9k Nov 22, 2022
An Ecommerce site for Cosmetic and Makeup products built using ReactJs , NodeJs and MongoDB.

An Ecommerce site for Cosmetic and Makeup products built using ReactJs , NodeJs and MongoDB. It Provides role based authentication to Admin for maintaining the store and Users for Purchasing product including cart,Checkout and Payment.

Mayuresan 3 Nov 8, 2021
In this project im going to build and deploy a online bus reservation application. Covered topics: Reactjs, Nodejs, Expressjs and Mongodb.Design patern: mvc

Merkob.ma This is a node.js online bus reservation application powered by Express that provides the main functions you'd expect, an admin system, etc.

marouane zahaoui 11 Nov 9, 2022
A web application for learning about your local politicians built with a React and Next.js front-end, an Express Node.js GraphQL backend API

Integra is a web application for learning about your local politicians. It is built with a React and Next.js front-end, an Express Node.js GraphQL backend API, and a MongoDB database with a Prisma schema.

Jeremy Nguyen 8 Sep 11, 2022