MDSLIDE

Create Minimalistic Slide Presentations using Markdown.

Note: Currently Not supported for Smaller device screens.

Try the App: MDSLIDE

🚀 Features

• ⚡ Make Simple yet Effective Slide Presentations using Markdown.
• 🌐 Publish your Slide Presentation.
• 💻 Present your/published Slide presentations in Fullscreen.
• 🎨 Custom background color, font color and fonts.
• 😎 Synced to the Cloud automatically. No need to save manually!

Demo

✨ What's next?

• Better Image Support.
• Upload custom image (Currently only external image links are supported).
• Collaborative Editing
• Responsive UI for smaller devices.
• Resizable editor panel.
• Optimize web accessiblity.
• Export as pdf, .html, .pptx

👨‍💻 Built with

• Nextjs: for building both the frontend and backend.
• Auth0: Complete User Authentication
• MongoDB: to persist data.
• Chakra UI: for building UI
• Vercel: for hosting
• Zustand: react state management
• @uiw/react-md-editor: react markdown editor
• swr: for fetching data from the backend api
• react-window: virtualize the slide navigator list
• next-pwa: make the next app a PWA

🛠️ Installation Steps

1. Clone the repository

git clone https://github.com/ArunMurugan78/mdslide.git

2. Change the working directory

cd mdslide

3. Install dependencies

yarn

1. Create .env file in root and add your variables. You can get the google developer font api key here. To get the auth0 credentials head over to auth0.com and create a application.

NEXT_PUBLIC_GOOGLE_FONT_API_KEY=
AUTH0_SECRET=
AUTH0_CLIENT_SECRET=
AUTH0_CLIENT_ID=
AUTH0_ISSUER_BASE_URL=
AUTH0_BASE_URL=

5. Run the app

yarn dev

You are all set! Open localhost:3000 to see the app.

🛡 License

This project is licensed under the MIT License.