neogcamp/mockbee

Mock Backend Servers for your next Frontend Project!

mockbee's Issues

Password encryption is missing on user authentication

Describe the bug
Currently, the user entered password is stored within the database as is. For security purposes, we would need to encrypt the password and then store it in the database.

Steps to fix this issue
We can make use of bcrypt to salt and hash the password.

Add Backend Object Schema Validation Library

The Body objects in POST requests; there is some validation expected in order to provide better error messages, formatting and consistent structure.

Can use Joi or Yup Validations for the same.

Bug in video library controller

• This issue is regarding the getVideosFromPlaylistHandler() which takes the playlistId from the request params and returns the respective playlist.

• However, the current logic of find() gives back the playlist that does not match the playlistId given in the params. Here is the screenshot.
  

• This can be fixed by checking for strict equality between playlistId and item._id

• Kindly confirm.

`schema` attribute is not well-utilized

Currently, at multiple places; this.db reference is used. However, the schema parameter is suggested by MirageJS to be used on priority. While Refactoring, this point can be considered.

Update Home Page for Documentation Site

The Documentation Site (/website) doesn't have a proper home page. Since we now have multiple backend apps and documentation ready; it is a good time to refactor UI of the Documentation site.

E-Commerce Documentation

The Documentation must contain:

• Detailed API Documentation
• Examples of API usage (Auth, etc. concepts)
• How to add custom Database
• How to alter the Mock Backend

Develop using Docusaurus 2.0

Password also used for creating JWT Token

Password is not necessary to be inserted in the token. We can consider having _id and email/username for creating token. Consider removing it.

Notes App APIs

Notes App has following APIs routes:

• Auth APIs:

  • POST signup
  • POST login

• User Routes

  • GET all notes
  • POST: create a new note
  • POST: edit a note
  • POST: Send note to Archives
  • DELETE: Delete a note from dashboard
  • DELETE: Delete a note from Archives

[DOCS]: Advanced Guides

Advanced Guides contains topics such as:

• Main Concepts
• Adding Custom APIs
• Resources

Feel free to discuss more towards it and ask if you have any questions related to content and docs to be included.

Configure ESLint and Prettier

For better configuration and linting, it is necessary to add ESLint and Prettier config.

Add CODE_OF_CONDUCT.md

Updation Needed in Documentation for MockBee

In the documentation you have mentioned this...

But , in the API we are destructuring product not cart in CartController.js

Prettify and Lint entire codebase

Codebase needs a clean-up!

mockBee 2.0: A Hub for CRA Templates

Presently, users can install the mockBee backend-powered apps by create-mock-backend, but has few challenges:

• The versions would soon get old with time. Need to maintain and keep all the apps with latest updates
• These are technically CRA apps. But, if in future a new update for CRA is released; the present folder structure, approach or internal performance would get hindered.
• mockBee is aimed to have tons of mock-backends. Maintenance is major drawback with current approach.

Proposed Solution:

• Have individual package for each mockBee app and managed with package-manager such as lerna. Then, user should be able to install apps directly by npx create-react-app --template mockbee-social-media or similar approach. Also, if user wants, user can install by create-mock-backend and select their template which internally would do create-react-app --template selected-template.
• This approach would ensure that all apps are in sync with latest CRA and users don't get confused about create-mock-backend to be a different thing as the aim to let users learn Frontend with simplicity.

This Issue will be actively looked into and very available to listen to views and opinions for improvements or better approaches.

Refer: https://create-react-app.dev/docs/custom-templates/

remove all console.logs from the app

Currently there are a lot of unwanted log statements in the backend. Needs to be cleaned

Suggested change in documentation

First of all great job with mockbee and mockman it is a true lifesaver and words fall short of how much time and effort is saved for all neogrammers in their journey learning frontend.

I have a doubt/ suggestion to make in the docs and please read this with the lens that this might be a very stupid/ obvious this which I ( onkar ) might have missed

The generic post private api calls in the e-com page are like so

{
action: {
type: "increment";
}
}

while in actuality when writing axios calls, we have to write

{
"action": {
"type": "increment | decrement";
}
}

this , for a beginner in js like me was not obvious , as i am used to just copypasting api calls from docs ( i have minor experience using razorpay api with python django)

So my question / suggestion is this : do the docs need to be of the first type or could they be modified a bit so as to make sure beginners like us who are the target audience users could have a smoother time with them?
thanks again for all the work Soham and Nada and team put in , great work !
Onkar Deshpande neog22

Replace `fetch` with Axios Calls

Since we are going to use Axios to make calls to the backend from frontend; it is intuitive to write the backend and frontend examples considering Axios in mind.

For example;
JSON.parse() or .json() functions doesn't make sense as Axios handles it out of the box.

A improvement in the Introduction Docs Page

Describe the bug
So for installation, I followed the steps as it is written in the docs i.e

After doing this step it asked for the Project Name which i entered

After doing this step it asked for the template to which i selected ecommerce

After that I typed npm start and it did not run, the reason for that was i did not cd into my newly made project

Suggestion: So we can add in the docs that you need to cd into your newly made directory

So i figured this out and i cd into my directory, and i ran npm start and it gave me this error

So i figured this out reading the error that we also need to run npm install before running npm start. But i was not able to find this in the docs. So if we can add this in the docs it would become more beginner friendly.

Suggestion: So we can add in the docs that you need to run npm install command to install the node modules before running npm start

This is the first issue raised by me ever, so please forgive the mistakes that i might have done in explaining the bug

ISSUE and PR Templates

For ease of contribution and bug reports/feature requests; issue templates are great way to express the problem. Can consider adding yml format.

Social media APIs

Backend APIs:

• Posts:

  • Get All Posts
  • Get Posts by User Id
  • Post a Post
  • Update Post Reactions
  • Update Post
  • Delete Post
  • Like Post
  • Dislike Post
  • See who has liked the Post

• Users:

  • Sign-up
  • Login
  • Get All Users
  • Find User by Username
  • Update User Details
  • Follow User
  • UnFollow User
  • Get follow list of user
  • Get following list of user
  • Update Followers and Following Lists On Follow/UnFollow
  • Add to Bookmarks
  • Remove From Bookmarks
  • Get Bookmarks
  • Delete Account

[DOCS]: Add the docs for the added endpoint: `/api/users/bookmark`

The PR #71 adds a new endpoint: /api/users/bookmark. Corresponding documentation shall be added in the docsite.

[DOCS]: Update Authentication Docs of the Project

The mockBee apps now use bcyrpt for password encryption. (present at apps/project/backend/controllers/AuthController.js)
We can extend the documentation for it in the documentation site (website/)

Wrong Status code for wrong password in E-Commerce app

Describe the bug
This is related to the Ecomm app, Auth controller
line:

mockBee/apps/e-commerce/src/backend/controllers/AuthController.js

Line 80 in 1026d64

new Response(

A return statement is missing which is causing status 201 on the wrong password instead of 401.

To Reproduce
try to log in with the correct email but the wrong password.

Expected behavior
Error with status 401 should be there

Screenshots

Additional context
Original code looks somewhat like this

adding a return statement on line number 92 fixes the issue for me:

Host Documentation Site on GH Pages

The Docsite can be hosted on Github Pages once the development of the first iteration is complete.

Convert the Project into a MonoRepo

Refer Lerna and NPX packages to convert this repo to a MONOREPO.

After this, the students can install a project by:
npx neog-camp-mock-backend --template project-name

Project Management APIs

Project Management APIs will have the following routes:

Auth Routes:

• login
• signup

Project Routes

• Get Projects
• Get Project by ProjectId
• Create Project
• Edit Project Details
• Delete Project

Task Routes

• Get all Tasks
• Get Task by Task Id
• Create a Task in a Project
• Edit a Task in a Project (user can change status, priority etc. attributes by passing updated obj)
• Move a Task to Trash
• Archive a Task

Label Routes

• Add Label to Project
• Remove Label from Project

Habit Tracker App

Habit Tracker has the following routes:

• Auth

  • Signup
  • Login

• Habit

  • Get Habits
  • Get Habit by HabitId
  • Create Habit
  • Edit Habit
  • Archive Habit
  • Delete Habit

• Archive

  • Get Archives
  • Delete From Archives
  • Restore From Archives

• Label

  • Get Labels
  • Create Label
  • Delete Label

Replace complex array operations with Lodash

The project contains a lot of complex operations that requires multiple steps. For cleaner code, we can adapt utility methods provided by Lodash for our application.

Documentation Site Structure and Content

The Documentation Site should have the following content:

• Getting Started

  • Introduction
  • Why MirageJS Mock Backend
  • How it works
  • Setup Project on Local
  • Code Structure and basic understanding
  • Adding Custom Data
  • Getting Frontend Running
  • Calling APIs and observing Response

• Extending the app

  • How does the MirageJS Backend Work?
  • Adding Custom API routes and functions
  • Resources and References for Advance extensions

• API Documentation

  • General APIs
    • Auth
  • E-Commerce APP
    • Cart
    • WishList
    • ...
  • Video Library APP
    • Likes
    • Playlist
    • ...
  • Some Project

• Sandboxes

User Cart , Wishlist Data not Persisting

When we add items to the cart with the use of API endpoints it shows the data then and there.

But , if we refresh the data doesn't persist

`.env` file pushed in all mockBee apps

Need to push a .gitignore file that contains .env in it, so that it is not pushed to apps.

Variable naming in API documentation for E-Commerce

This is a variable naming bug. In the documentation's code snippet, it says wishList is returned in response.data but the handler is actually returning wishlist.

• Here is the screenshot of documentation
  

• Here is the screenshot of the handler code
  

Please confirm. Thanks.

Create a Home Page for all mockBee Templates

Similar to the scaffold provided by create-react-app, we need a home page that sits in App.jsx; which contains:

• Welcome to mockBee UI
• Links to Documentation
• Links to Codebase
• Links to Different Templates available in mockBee

Should be very similar to create-react-app and create-next-app

Body in HTTP Delete Request doesn't make sense

In few DELETE requests; the body is also passed.
Based on:
axios/axios#897
and
https://stackoverflow.com/questions/51069552/axios-delete-request-with-body-and-headers

Remove the body and add query params in the request URL itself.

Forum App APIs

The Forum App should have the following APIs

Auth Routes

• Signup
• Login

User Routes

• Get User Details
• Update User Details

Questions Routes

• Get All Questions
• Get Question by QuestionId
• Get Questions asked by Specific User
• Get all Popular Tags
• Get Questions by TagName
• Post a Question
• Delete a Question

Answers Routes

• Get All Answers of a Particular Question
• Post Answer to a Particular Question
• Delete Answer

Votes Routes

• Get Score of a Particular Question
• Get Score of a Particular Answer on a Particular Question
• Upvote a Question
• Downvote a Question
• Unvote a Question
• Upvote answer of a particular Question
• Downvote answer of a particular Question
• Unvote answer of a particular Question

Comments Routes

• Get Comments of a particular question
• Get comments of a particular answer of a question
• Post a comment on question
• Post a comment on answer
• Delete Comment on Question
• Delete Comment on Answer

Video Library Routes

The Video Library API Routes are as follows:

Auth Routes

• Signup
• Login
• Logout (TBD)

Video Routes

• Get All Videos
• Get Video from VideoID
• POST a Video (TBD)

Categories Routes

• Get All Categories
• Get Category by CategoryID

Likes Routes

• Get User's Liked Videos
• Add Like to a Video
• Remove Like from a Video

Playlist Routes

• Get All Playlists
• Add a new Playlist to Playlists
• Remove a Playlist from Playlists
• Get All Videos From a Playlist
• Add a Video to a Playlist
• Remove a Video from Playlist

History Routes

• Get User History
• Add Video to User History
• Remove Video From User History
• Clear History

Recommendations Routes (TODO)

[BUG]: ESLint Breaking code

Describe the bug
Because of updated ESLint rules config added in the codebase by PR #36 and some other pushes , the apps weren't able to start correctly. Until this issue is fixed and tested completely, remove ESLint from the codebase for now.

Add LICENSE file

License file for defining the clarifying permissions.

Create npx starter kit with different template apps

Currently the process of using MockB is to clone and take code; but the better way can be to use npx starter kit combined with Yarn Workspaces.

Refer:
https://bonsaiilabs.com/create-npx-starter-command/
https://dev.to/leopold/generate-your-web-app-boilerplate-like-create-react-app-does-301p

(add more resources if you come across)

Empty mockBee Template

Currently, we have api-powered templates for different projects. We can have empty-templates with folder-structure setup and let users develop mock-backend all by themselves. This can also serve for creating new mock-api for projects; we can start from here itself.

Update Installation Docs according to latest `create-mock-backend` app

Currently the Documentation Site doesn't contain the latest installation guide. Should contain details upon how to install with create-mock-backend

Add CONTRIBUTING.md File

Contributing File can be a good start point for developers to understand the codebase and more upon how they can contribute.

Add Notes App in the `create-mock-backend`

Currently create-mock-backend doesn't have notes-app to be downloaded option when run in terminal. We can add it to the FEATURED_TEMPLATES array.

mockBee/src/init.js

Line 9 in 86a7f49

const FEATURED_TEMPLATES = [

[DOCS]: Guides Section

The Guides Section in the Docsite contains following topics:

• Why MirageJS Mock Backend
• How it works?
• Customization
• Available APIs
• Playground (P2)

Need to add detailed guides for the above topics in the Guides section.

Feel free to ask if you have anything to discuss regarding the docs content and details.

Need to update documentation for wishlist api.

1. As per docs, the response body of the add to wishlist endpoint will be as such:
   

But it needs to be rectified to :

{
  data : {
     wishlist : Array;
  }
}

Video Library Documentation

The Documentation must contain:

• Detailed API Documentation
• Examples of API usage (Auth, etc. concepts)
• How to add custom Database
• How to alter the Mock Backend

Develop using Docusaurus 2.0

`createdAt` and `updatedAt` attributes currently not supported in Database Models

In the MongoDB database, the date-time tracking is relatively simpler. While in present case, adding date-time support will be a good feature as User would get more information about the actions on the app.

Add README.md File

A comprehensive Readme file can help developers to understand the project better.

Can contain:

• About the Project
• Features
• Installation
• Documentation links
• Future Scope
• Contributing
• LICENSE

Use Relationships to have named relational Data

Currently the categories and videos/products aren't having a DB relation between them.
We can use the hasMany(), belongsTo() etc. features of MirageJS in it.

Refer: https://miragejs.com/tutorial/part-6/

E-Commerce Routes

The Video Library API Routes are as follows:

Auth Routes

• Signup
• Login
• Logout (TBD)

Product Routes

• Get All Products
• Get Product from ProductID

Categories Routes

• Get All Categories
• Get Category by CategoryID

Cart Routes

• Get All Cart Items
• Post Item to Cart
• Remove Item From Cart
• Increment/Decrement Cart Item in Cart

WishList Routes

• Get All WishList Items
• Add Item To WishList
• Remove Item From WishList