What's up y'all!
Just as a quick heads up, it seems I can
Been a bit! My apologies, I may have enjoyed the holidays a little too much and then come down with the sickness like disturbed and that put me out of commission for quite a bit!
Anyways, what have I been up to? I believe my last post was mostly about how I intended to make my next project about a full stack application that I was working on!
Well I finished it! I coded an end to end full stack application using react js and typescript on the front end, node/express with typescript on the backend, and mongoDB as the database where I persist not only user data and documents!
So what is this project? Well, I created an in browser editor that allows devs (like us) to edit and preview markdown files! It only supports a couple of the features but it was really cool figuring out how some of this work and I got really familiar with a couple of really cool libraries in react to help handle some of the more complex bit of code!
One of those libraries was the monaco-editor! It basically renders a full on code editor directly in the browser that you can customize and stylize with your own configuration if you want to!
The other component that was basically central to rendering the markdown was react-markdown, it's a really cool component that takes a string of markdown as props and then renders those in the window for you!
Well that sounds easy right? Well those did abstract a lot of the complexity of the rendering and editing of the markdown of the project pretty effectively, but a lot of the actual over head of the project such as authentication, styling, database set up, and even deployment of the site to a url were all handled by me so not trying to reinvent the wheel on those two things seemed like a wise decision to make (at least to me, no one has time for all that).
Authentication alone was something that I decided to roll my own of and BOY was that difficult. The way the app works now is that it creates a unique user in the data base on signup with an encrypted password (if the user is in fact unique), then on sign in it compares the encrypted password to the password that's passed, and sends back a cookie to the browser.
Then the user makes another request to verify authentication and, assuming they get a response, can finally navigate to their dashboard. when the dashboard loads, it makes a simple request for the authenticated user's documents, then creates links with that document's id incorporated.
When the user uses one of those links to navigate to a document page, the server pulls the id from the url, and then uses that to return the document data to the browser!
That's all done using node/express as the backend web server, passportjs for authentication set up, and mongodb for the persisting user documents! (ignore the squigglies, I cloned the repo and the ts server was screaming at me). One catch is that I didn't perserve session on reload. Mostly because I didn't want to encourage users to...well use the project for too long. I pay for the resources and ya boi ain't made of money!
Anyways, I've attached a long form explanation of all the code to this project in a video on here so if you want to see more then feel free to watch OR check out the code on my github!
OH I guess you can also see the project live at the links below:
Is the project perfect? Nope.
Is it awesome, live, and can I brag about finishing it? You bet your sweet bottom I can and will
Anyways, until next time, onwards and upwards.
Travis
