Hi, I'm Inayath Hussain, In this blog I will explain all the libraries and features I have implemented in this project.&nbsp;&nbsp;&nbsp;<h2>NEXT JS</h2>&nbsp;This is a SSR (Server Side Rendered) <a href="https://nextjs.org/">Next JS</a> app. Data in every page is fetched using getServerSideProps which means pages are pre-rendered in server-side using data returned from getServerSideProps function. Since getServerSideProps function will run on server-side I fetched data directly from database instead of calling an api to avoid additional request to the server.&nbsp;<h3>FrontEnd</h3>&nbsp;<h3>STYLING</h3><figure class="image"><img src="https://blog--now.s3.ap-southeast-2.amazonaws.com/Draft/inayathh9%40gmail.com/17164682074311692972328622tailwindcss-ar21.png"></figure>At beginning of the project I used module css to style components later I started using <a href="https://tailwindcss.com/">tailwindCSS</a>, you can notice in the project repo I have used module css in login and register page.&nbsp;&nbsp;<h4>Editor</h4><figure class="image"><img src="https://blog--now.s3.ap-southeast-2.amazonaws.com/Draft/inayathh9%40gmail.com/17164685371631692972596023ckeditor-wordmark.png"></figure>I have used <a href="https://ckeditor.com/">CKEditor 5</a>, it is an open source WYSIWYG text editor. They provide pre-configured builds to use in your application and also a <a href="https://ckeditor.com/ckeditor-5/online-builder/">custom build option</a> to customize configuration according to requirement. I have used custom build option to create a user friendly editor and to include upload adapter option to store images inserted in the editor.&nbsp;&nbsp;<h2>BackEnd</h2>&nbsp;<h3>DataBase</h3>I am using <a href="https://www.mongodb.com/">mongodb</a>, a no-sql document based database, to store all the information( user profile, drafts, blogs etc. ). I'm using free version of cluster to use in live project. I am using mongoose, a node js based ODM(Object Document Modeling), to interact with mongodb cluster. Creating connection is different in next js compared to node. By default, Next.js uses serverless deployment with server-side rendering. When using serverless functions, each function invocation creates a new instance, so you might need to establish a new MongoDB connection for each invocation. To avoid creating multiple connection, we can cache db connection and reuse it. Here's the guide which helped me understand: <a href="https://blog.openreplay.com/a-complete-guide-to-nextjs-plus-mongodb/">A Complete Guide To Next.Js Plus MongoDB</a>&nbsp;<h3>Cloud Storage</h3>I'm using aws S3 to store all the images used in the app like profile pic, cover images of blog and images inserted in editor. I have implemented an custom upload adapter which stores image to s3 bucket when inserted in editor. S3 bucket updation depending on image changes in draft or in userInfo is done in respective api's. I have implemented a separate collection in db which contains key and url of all images being used in app for easy deletion.&nbsp;<h2>Features</h2>&nbsp;<h3>Authentication</h3>I have created a custom JWT(json web token) based authentication which involves access key and refresh key. Access key is valid for 1hour and refresh key for 30 days. Access key will be renewed after getting expired and refresh key every other day. Users validation and key renewal are done in getServerSideProps. I'm storing these keys in cookies instead of localStorage, I can store in localStorage using <a href="https://www.npmjs.com/package/react-secure-storage">react-secure-storage</a>. I have used <a href="https://www.npmjs.com/package/jose">jose</a> library for creation of jwt.&nbsp;&nbsp;<h3>Verification Code</h3><figure class="image"><img src="https://blog--now.s3.ap-southeast-2.amazonaws.com/Draft/inayathh9%40gmail.com/17164685661111692972950069verification%2Bcode.png"></figure>User registration process involves users verifying their mail by providing 4 letter code sent to their mail. The code will be valid for 1hour and will be sent to user through gmail's smtp service. I have collection dedicated for this process where I have added ttl index for automatic deletion of documents after 1hour. This process is also implemented when users want to change their mail. I have used <a href="https://nodemailer.com/">nodemailer</a> to send verification code and node's built-in <a href="https://www.npmjs.com/package/crypto">crypto</a> package to create code.&nbsp;&nbsp;

Inayath Hussain

Email: inayathh9@gmail.com

Followers: 0

Blogs

Inayath Hussain

inayathh9@gmail.com

May 23 2024

Libraries and Features Implemented in Blog Now