In-browser markdown editor solution

This is a solution to the In-browser markdown editor challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Create, Read, Update, and Delete markdown documents
• Name and save documents to be accessed as needed
• Edit the markdown of a document and see the formatted preview of the content
• View a full-page preview of the formatted content
• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: Solution URL
• Live Site URL: https://hidalest.github.io/markdownEditor/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• SCSS - CSS Preprocessor
• React - JS library
• Redux.js - React framework
• Marked.js - Javascript Library for markdown

What I learned

For this project I knew that I had to have a Global State to manage the files and app seamlessly, for this Initially I thought on using React Context but I had some problems with it and after making some research I found that React Context is not a good tools to manage the GlobalState and the best option is using Redux.

So for this project I learned React-Redux with React Toolkit in order to accomplish my goal :)

This is the Slice that I created for Redux for managing the files by calling these methods

import { configureStore, createSlice } from '@reduxjs/toolkit';
import dummyData from '../data.json';

const [test1, test2] = dummyData;

const initialState = {
  files: [test2],
};

const newFileTemplate = {
  createdAt: 'today',
  name: 'untitled-file.md',
  content: test2.content,
  isActive: true,
  isModified: true,
  id: Math.random(),
};

const filesSlice = createSlice({
  name: 'files',
  initialState,
  reducers: {
    addFile(state) {
      state.files.forEach((file) => {
        file.isActive = false;
      });
      state.files.unshift({
        ...newFileTemplate,
      });
    },

    updateFiles(state, action) {
      state.files = [...action.payload];
    },

    setActiveFile(state, action) {
      const { files } = state;
      const { id } = action.payload;
      files.forEach((file) => (file.isActive = false));
      const selectedFile = files.find((file) => file.id === id);
      selectedFile.isActive = true;
    },

    updateFileProperty(state, action) {
      const { value, property } = action.payload;
      const activeFile = state.files.find((file) => file.isActive === true);
      activeFile[property] = value;
    },

    deleteFiles(state, action) {
      const activeFileIndex = state.files.findIndex((file) => file.isActive);
      const newFiles = state.files.filter((file) => !file.isActive);
      if (activeFileIndex > 0) {
        newFiles[activeFileIndex - 1].isActive = true;
      } else {
        newFiles[0].isActive = true;
      }
      state.files = [...newFiles];
    },
  },
});

const store = configureStore({
  reducer: {
    files: filesSlice.reducer,
  },
});

export const filesActions = filesSlice.actions;

export default store;

Continued development

For this project I felt really comfortable using React but I did struggled with the planning of the app.

The plan is to continue doing projects but now with Typescript and plan the project before hand.

Also for my next project I want to start implementing Unit Testing.

Author

• Frontend Mentor - @hidalest
• Twitter - @hidalest