A WIP, MERN stack (MongoDB, Express, React and Node.js) code snippet CRUD application. A deployed version can be viewed here.
CodePasta started life as an attempt to port an old code snippet CSS styling exercise using React components out of a combination needing to practice React patterns, and a dash of boredom. After realizing that using React was likely overkill for a fairly simple static application, I added create, read, write and delete functionality using MongoDB/No-SQL as the database paradigm, along with backend API routing using Express. This was also a good excuse to learn and try out Tailwind CSS. At its core, this app is basically a glorified to-do list.
To install and run this application locally, you can either run a development build, or create a production build. The development build will run slower than the production since it will be using unminified Javascript files, and the entirety of the Tailwind CSS stylesheet.
- Make sure you have Node.js installed on your local machine.
- You will need to have a MongoDB server installed on your local machine to access the data locally. You can install the community version here.
- Then clone or download the repository. There are two folders in this repository, one for the front end (
/client
) and one for the backend (/api
). Each has their ownpackage.json
, so you will need to install dependencies for both directories.
// Navigate into the client directory, and run npm install
cd ./client
npm install
// Navigate into the api directory, and run npm install
cd ./api
npm install
- You'll have to also run both servers that are running on
localhost:3000
(front end), andlocalhost:3001
by running the following:
// Navigate into the api directory, and run npm start
cd ./api
npm start
// Navigate into the client directory, and run npm start
cd ./client
npm start
- After which, you can open up
localhost:3000
on your web browser to view and use the application.
- Alternatively, if you want to try out a production build, run
npm run build
in the./client
directory after installing all the dependencies:
cd ./client
npm run build
- This will create a new
./build
folder in the./client
directory. Cut and paste that directory into the root directory of./api
. - Now run
npm start
in the./api
directory. It will launch a production build of the application onlocalhost:3001
.
- Click the "+ New Snippet" button in the navbar to add a new snippet.
- Click the clipboard to copy the specific snippet to your clipboard (assuming you've allowed permissions).
- Click the update button to toggle on edit mode, which lets you edit the text area of the snippet. Clicking cancel will revert the snippet to the original value.
- Click the delete button to delete the snippet.
- Ability to edit title of the snippet!
- Refactor React component source code (right now it's very jank and hacky)!
- Better responsiveness!
- Add animations!
Ability to order pasta from the app!Someday.
Any suggestions or problems can be submitted in issues.