ImCoding

---

What does this project do?

• It's a place to share some of my notes and personal cheatsheets for all topics 'WebDev'... and sort of a coding blog merged into one.
• The articles are written in markdown and stored in a remote MongoDB database via Atlas.
• There is an authentication system setup so you can add, edit and delete content if you are logged in.

---

About this project

ImCoding uses an Express server and RESTful api on the server-side, with a React front end.

The articles are written in Markdown; which is stored in a MongoDB database... hosted by Atlas.

I'm using the native MongoDB driver in node.

Joi input validation is used in the controllers for the input and editing of articles.

To render the Markdown in React, I'm using "react-markdown" and "react-syntax-highlighter".

This CodeBlock component is being used with react-syntax-highlighter and it is styled using "css-in-js"... which I'm not crazy about in general, but it worked fine in this use case.

// codeBlock.js

// ,,,import and configure necessary items


const markdownCSS = {
    fontSize: 'clamp(0.9rem, 0.55vw + 0.6rem, 1rem)',
    margin: '1rem 1rem 2rem 1rem',
    padding: '1rem',
    maxWidth: '120ch',
    overflowX: 'auto',
    boxShadow: '5px 5px 5px 0px rgba(0, 0, 0, 0.5)',
};

const CodeBlock = {
    code({ node, inline, className, children, ...props }) {
        let match = /language-(\w+)/.exec(className || '');
        if (!match) match = ['language-txt', 'text']; // this is not a real or supported language, but it does make the text white in a code block
        return !inline && match ? (
            <SyntaxHighlighter
                children={String(children).replace(/\n$/, '')}
                style={tomorrow}
                customStyle={markdownCSS}
                language={match[1]}
                PreTag="div"
                {...props}
            />
        ) : (
            <code className={className} {...props}>
                {children}
            </code>
        );
    },
};

The Markdown is rendered in the article page using the <ReactMarkdown> component (which includes the above CodeBlock component for syntax highlighting).

<ReactMarkdown components={CodeBlock}>{article.markdown}</ReactMarkdown>

This project includes an authentication system using "Passport", plus a few other packages to maintain persistent user sessions.

The server uses the npm package, Helmet, to set Content Security Policy directives.

Normally, I would install "react-scripts" as a devDependency because v4 has security vulnerabilities. But, since this app is hosted on Heroku, it had to be installed as a regular dependency because Heroku uses it during the build process.

This project uses ESLint and has separate ".eslintrc.json" files for the server and the React front end.

There is extensive testing coverage for the api routes (59 tests), using Mocha, Chai and Chai-http.

---

How you can use this project?

• Clone the GitHub repo.
• Install the necessary npm packages.
• Include these environmental variables in your .env file:

MONGODB_URI_LOCAL=mongodb://localhost:27017/
MONGODB_DB_LOCAL=local_db_name
MONGODB_URI=MONGODB_URI=remote_mongodb
MONGODB_DB=db_name
# ----------
NODE_ENV=dev
ES_KEY=cookie_name
SESSION_SECRET=your_session_secret
REACT_APP_EMAIL=your@email.com

• Set up either a local or remote MongoDB database using the connection parameters in the above .env file.
• Start the app.

npm run dev

# or to run just the Express server and not the front end
npm run start

---

• Live version: imcoding.herokuapp.com
• This project's github repo: https://github.com/mike14747/imcoding
• Me on github: https://github.com/mike14747
• Contact me at: mgullo.dev@gmail.com