{"id":24443851,"url":"https://github.com/iamabhi747/nrtgmp-template","last_synced_at":"2025-10-09T21:12:29.823Z","repository":{"id":266412586,"uuid":"898063815","full_name":"iamabhi747/nrtgmp-template","owner":"iamabhi747","description":"This repository is a robust base template for building modern web applications using Next.js, React, TailwindCSS, GraphQL, MongoDB, Sequelize, and Shadcn components. It is designed with a modular structure to facilitate scalability and maintainability.","archived":false,"fork":false,"pushed_at":"2024-12-17T09:06:19.000Z","size":459,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T21:33:27.481Z","etag":null,"topics":["graphql","mongodb","mongoose","nextjs","nextjs14","postgresql","react","sequelize","shadcn-ui","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamabhi747.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-03T18:12:10.000Z","updated_at":"2025-01-12T18:33:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"0f6adaf8-60e3-471a-b8ff-fe8e3b3fb1af","html_url":"https://github.com/iamabhi747/nrtgmp-template","commit_stats":null,"previous_names":["iamabhi747/nrtgmp-template"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/iamabhi747/nrtgmp-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamabhi747%2Fnrtgmp-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamabhi747%2Fnrtgmp-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamabhi747%2Fnrtgmp-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamabhi747%2Fnrtgmp-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamabhi747","download_url":"https://codeload.github.com/iamabhi747/nrtgmp-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamabhi747%2Fnrtgmp-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002075,"owners_count":26083285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","mongodb","mongoose","nextjs","nextjs14","postgresql","react","sequelize","shadcn-ui","tailwindcss"],"created_at":"2025-01-20T22:18:13.425Z","updated_at":"2025-10-09T21:12:29.788Z","avatar_url":"https://github.com/iamabhi747.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# NRTGMP Template\n\n![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=white)\n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![TailwindCSS](https://img.shields.io/badge/TailwindCSS-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n![GraphQL](https://img.shields.io/badge/GraphQL-E10098?style=for-the-badge\u0026logo=graphql\u0026logoColor=white)\n![MongoDB](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge\u0026logo=mongodb\u0026logoColor=white)\n![Sequelize](https://img.shields.io/badge/Sequelize-52B0E7?style=for-the-badge\u0026logo=sequelize\u0026logoColor=white)\n![PostgreSQL](https://img.shields.io/badge/PostgreSQL-336791?style=for-the-badge\u0026logo=postgresql\u0026logoColor=white)\n![Shadcn](https://img.shields.io/badge/Shadcn-000000?style=for-the-badge\u0026logo=shadcn\u0026logoColor=white)\n\n![GitHub forks](https://img.shields.io/github/forks/iamabhi747/nrtgmp-template?style=for-the-badge)\n![GitHub stars](https://img.shields.io/github/stars/iamabhi747/nrtgmp-template?style=for-the-badge)\n\n\u003c/div\u003e\n\nThis repository is a robust base template for building modern web applications using Next.js, React, TailwindCSS, GraphQL, MongoDB, Sequelize, and Shadcn components. It is designed with a modular structure to facilitate scalability and maintainability.\n\n## Getting Started\n\nFirst, install the `create-nrtgmp-app` package globally:\n\n```bash\nnpm install -g create-nrtgmp-app\n```\n\nThen, create a new project using the package:\n\n```bash\nnpx create-nrtgmp-app my-nrtgmp-app\n```\n\nNavigate to the project directory and run the development server:\n\n```bash\ncd my-nrtgmp-app\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Technologies Used\n\n- **Next.js**: A React framework for production.\n- **React**: A JavaScript library for building user interfaces.\n- **TailwindCSS**: A utility-first CSS framework.\n- **GraphQL**: A query language for your API.\n- **MongoDB**: A NoSQL database.\n- **Sequelize**: A promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite, and Microsoft SQL Server.\n- **Shadcn Components**: A set of UI components.\n\n## GraphQL Setup\n\nGraphQL is set up using Apollo Server and Apollo Client. The Apollo Client setup will change frequently, and documentation for it will be added later.\n\nIn development mode, there is an Apollo GraphQL playground available at `http://localhost:3000/graphql`.\n\n### Adding GraphQL Queries and Resolvers\n\nThe project follows a modular structure for GraphQL. To add a new query or extend an existing query:\n\n1. Create a folder in `/src/graphql`.\n2. Add two files: `*.graphql` and `*.resolver.js`.\n\n\n```graphql\n# src/graphql/user/user.graphql\ntype User {\n  id: Int!\n  name: String!\n}\n\ntype Query {\n  users: [User!]\n}\n```\n\n`*.graphql` files define the schema for the query. This example defines a `User` type with `id` and `name` fields, and a `users` query that returns a list of users.\n\n\n```javascript\n// src/graphql/user/user.resolver.js\nconst { users } = require(\"./user.js\");\n\nmodule.exports = { \n    Query: {\n        users: async (parent, args) =\u003e {\n            return users; \n        }\n    }\n}\n```\n`*.resolver.js` files export an object with the query resolvers.\nThis resolver provides the implementation for the `users` query, returning a list of users.\n\n## API Routes\n\nTo add APIs, use the Next.js App Router:\n\n1. Create a folder in `/src/app/api`.\n2. Inside this folder, create a file named `route.js`.\n3. Export async functions for supported methods that handle the request and response.\n\n\n```javascript\n// src/app/api/hello/route.js\nexport async function GET(request) {\n    return new Response(JSON.stringify({ message: 'Hello, world!' }), {\n        headers: { 'Content-Type': 'application/json' },\n    });\n}\n```\n\nThis example creates an API route at `/api/hello` exposing a `GET` method that returns a JSON response with a message.\n\n## Database Setup\n\nThis repository supports both MongoDB and PostgreSQL (via Sequelize) with a modular setup. Databases will be connected automatically at initialization if the necessary environment variables are provided.\n\n### MongoDB\n\n- Directory: `/src/mongodb`\n- Datasources: `/src/mongodb/datasources.js`\n\n### Sequelize (PostgreSQL)\n\n- Directory: `/src/sequelize`\n- Datasources: `/src/sequelize/datasources.js`\n\n### Environment Variables\n\nEnsure the following environment variables are set in your `.env` file:\n\n- MongoDB: `MONGODB_URI`\n- PostgreSQL: `DB_HOST`, `DB_PORT`, `DB_NAME`, `DB_USER`, `DB_PASS`\n\n### Accessing Datasources\n\n#### In GraphQL Resolvers\n\nDatasources can be accessed in GraphQL resolvers by using the `ds` object from `context`.\n\n```javascript\n// src/graphql/user/user.resolver.js\nmodule.exports = { \n    Query: {\n        users: async (parent, args, { ds }) =\u003e {\n            return ds.UserDataSource.getUsers();\n        }\n    }\n}\n```\n\n#### In API Routes\n\nDatasources can be accessed by importing `@/mongodb/datasources.js` or `@/sequelize/datasources.js`.\n\n```javascript\n// src/app/api/user/route.js\nimport mongoDatasources as ds from '@/mongodb/datasources.js';\n// or\n// import sequelizeDatasources as ds from '@/sequelize/datasources.js';\n\nexport async function GET(request) {\n    return new Response(JSON.stringify(await ds.UserDataSource.getUsers()), {\n        headers: { 'Content-Type': 'application/json' },\n    });\n}\n```\n\n### Adding Datasources\n\n#### MongoDB\n\n1. Create a folder in `/src/mongodb/models`.\n2. Add two files: `*.model.js` and `*.datasource.js`.\n\n\n\n```javascript\n// src/mongodb/models/user/user.model.js\nconst { Schema, model } = require('mongoose');\n\nconst userSchema = new Schema({\n    id: {\n        type: Number,\n        required: true\n    },\n    name: {\n        type: String,\n        required: true\n    }\n});\n\nconst UserModel = model('user', userSchema);\nmodule.exports = {\n    UserModel\n};\n```\n\n`*.model.js` files define the schema for the model and export the model. This example defines a `User` model with `id` and `name` fields.\n\n\n```javascript\n// src/mongodb/models/user/user.datasource.js\nconst { MongoDataSource } = require('apollo-datasource-mongodb')\nconst { UserModel } = require('./user.model.js');\n\nclass UserDataSource extends MongoDataSource {\n    async getUserById(id) {\n        return this.model.findOne({ id });\n    }\n}\n\nmodule.exports = {\n    name: \"UserDataSource\",\n    model: UserModel,\n    datasource: UserDataSource\n};\n```\n\n`*.datasource.js` files define the datasource for the model and export an object containing the model name, model, and datasource. This example defines a `UserDataSource` with a method to get a user by ID.\n\n#### Sequelize\n\n1. Create a folder in `/src/sequelize/models`.\n2. Add a single file: `*.model.js`.\n\n\n```javascript\n// src/sequelize/models/user/user.model.js\nconst { DataTypes, Model } = require('sequelize');\n\nclass UserModel extends Model {\n    static getUserById(id) {\n        return this.findByPk(id);\n    }\n}\n\nconst UserModelDefination = {\n    id: {\n        type: DataTypes.INTEGER,\n        primaryKey: true,\n        autoIncrement: true\n    },\n    name: {\n        type: DataTypes.STRING,\n        allowNull: false\n    },\n    email: {\n        type: DataTypes.STRING,\n        allowNull: false\n    },\n    password: {\n        type: DataTypes.STRING,\n        allowNull: false\n    }\n}\n\nmodule.exports = {\n    modelName: 'User',\n    model: UserModel,\n    defination: UserModelDefination\n};\n```\n\n`*.model.js` files define the model for the datasource and export an object containing the model name, model, and model defination. This example defines a `User` model with `id`, `name`, `email`, and `password` fields.\n\n### Prefix in Sequelize Datasources\n\nTo prevent naming clashes between similar names, there is a prefix for Sequelize datasources which can be changed through the environment variable `SEQUELIZE_PREFIX`. The default prefix is \"pg\".\n\n### Support for MySQL, MariaDB, SQLite, and Microsoft SQL Server\n\nAs Sequelize supports multiple databases, the setup for MySQL, MariaDB, SQLite, and Microsoft SQL Server is similar to PostgreSQL. The difference will be changing the environment variables and the database dialect in the Sequelize configuration.\n\n## Managing Session Data\n\nNRTGMP uses Iron Session for managing session data. The session data is stored in cookies and encrypted using Iron. The session data can be accessed in API routes, GraphQL resolvers and Sever components \u0026 actions.\n\n### Setting Up Session\n\nTo start using session data, add session fields in the `defaultSession` object in `/src/lib/session/options.js`. You can also customize Iron session options in the `serverOptions` object.\n\n```javascript\n// src/lib/session/options.js\n\nexport const serverOptions = {\n    cookieName: process.env.SESSION_COOKIE_NAME || \"NSESSION\",\n    password: process.env.SESSION_SECRET,\n    cookieOptions: {\n        secure: process.env.NODE_ENV === \"production\",\n    },\n};\n\nexport const defaultSession = {\n    user: \"Guest\",\n};\n```\n\n### Accessing Session Data\n\nIf the session is not set, the default session data will be returned. You can modify the session data directly like a JavaScript object and call `session.save()` to save the changes.\n\n#### In API Routes, Server Components, and Actions\n\nSession data is accessed in API routes, server components, and actions using the `getSession` function from `@/lib/session/fromCookies`.\n\n```javascript\nimport { getSession } from '@/lib/session/fromCookies';\n\nexport async function Something(request) {\n    const session = await getSession();\n    session.user = \"New User\";\n    await session.save();\n}\n```\n\nIn this example, `Something` can be an API route, server component, or action.\n\n#### In GraphQL Resolvers\n\nSession data is accessed in GraphQL resolvers using the `session` object from `context`.\n\n```javascript\n// src/graphql/user/user.resolver.js\nmodule.exports = { \n    Query: {\n        users: async (parent, args, { session }) =\u003e {\n            session.user = \"New User\";\n            await session.save();\n        }\n    }\n}\n```\n\n# Connecting to Apollo Client\n\nAll things are there in this documentation but if you want to explore more \nyou can refer [Refrence for ApolloClient](https://www.apollographql.com/docs/react/get-started)\n\nThe naive example is shown in app/layout.js\nadd 'use client'\n\n```javascript\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\n\n// adding the client route adding here default ones \nconst client = new ApolloClient({\n  uri: 'http://localhost:3000/graphql',\n  cache: new InMemoryCache(),\n});\n\n// Wrapp in this fashion\nexport default function RootLayout({ children }) {\n  return (\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\n        className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}\n      \u003e\n        {/* Wrapping the Apollo client for the HomePage */}\n        \u003cApolloProvider client={client}\u003e\n          {children}\n        \u003c/ApolloProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n### Using Queries and Mutation on the client side \n\nYou should add the import as shown you can choose between useMutation and useQuery as per your need\n\n```javascript\nimport { useMutation, useQuery, gql } from '@apollo/client';\n```\n\n### For Query\n\nFirst of all add the Query \n```javascript\nconst QUERY_NAME = gql`\n  query GetLocations {\n    locations {\n      id\n      name\n      description\n      photo\n    }\n  }\n`;\n```\n\nAfter the setting the query add this inside of your function \n\n```javascript\nconst { loading, error, data } = useQuery(QUERY_NAME);\n\nif (loading) return \u003cp\u003eLoading...\u003c/p\u003e;\nif (error) return \u003cp\u003eError : {error.message}\u003c/p\u003e;\n```\n\nNow you are ready you can map and display the data as per your need\n\n### For Mutation \n\nFirst of all add the Mutation query \n\n```javascript\nconst ADDLIKE = gql`\n  mutation Mutation($addLikeId: Int!) {\n  addLike(id: $addLikeId) {\n    username\n    likes\n    id\n    description\n    comments {\n      username\n      likes\n      id\n      description\n    }\n  }\n}\n`;\n```\nThen add the following inside your function \n\n```javascript\nconst [addLike, { data, loading, error }] = useMutation(ADDLIKE);\nif (loading) return 'Submitting...';\nif (error) return `Submission error! ${error.message}`;\n```\n\n# If there are variable for input \n\nThen simply follow this for both query as well as mutation.\n\neg : I'm taking the mutation from above mutation query refer that, you can follow for query as well. \n\n```javascript\nconst [addLike, { data, loading, error }] = useMutation(ADDLIKE);\n\n//Let's assume we're performing onClick on the button and function is handleLikes and it needs id\n// This function is also inside the function and here I'm giving default value you can pass variable instead\nconst handleLikes = () =\u003e {\n  addLike({\n    variables : {\n      addLikeId: 1\n    }\n  })\n}\n```\n\n\n## Shadcn Components\n\nLet's say you want to add a Button but it is already setup \nVisit this website [ShadCn](https://ui.shadcn.com/docs/components/accordion)\n\nHere I'll get the following for the button \n\n```javascript\nnpx shadcn@latest add button\n```\nAs it is already setup you'll see the components directory in the root \nYou can modify that as well after installing.\n\nYou can simply import the component as follows \n```javascript\nimport { Button } from \"@/components/ui/button\"\n```\n\nWe're ready to use it \n```javascript\n\u003cButton variant=\"outline\"\u003eButton\u003c/Button\u003e\n\u003cButton variant=\"destructive\"\u003eButton\u003c/Button\u003e\n\u003cButton variant=\"default\"\u003eButton\u003c/Button\u003e\n\u003cButton variant=\"secondary\"\u003eButton\u003c/Button\u003e\n\u003cButton variant=\"ghost\"\u003eButton\u003c/Button\u003e\n\u003cButton variant=\"link\"\u003eButton\u003c/Button\u003e\n```\nYou can also modify them by easy TailwindCss change\n\n## Scripts\n\n- `npm run dev`: Start the development server.\n- `npm run build`: Build the project.\n- `npm run start`: Start the production server.\n- `npm run lint`: Run the linter.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamabhi747%2Fnrtgmp-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamabhi747%2Fnrtgmp-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamabhi747%2Fnrtgmp-template/lists"}