{"id":18643868,"url":"https://github.com/iberasoft/reactjs-graphql-practice","last_synced_at":"2026-01-31T08:04:00.610Z","repository":{"id":38010062,"uuid":"196582604","full_name":"IberaSoft/reactjs-graphql-practice","owner":"IberaSoft","description":" :apple: Simple app for learning puorposes","archived":false,"fork":false,"pushed_at":"2024-12-21T13:45:04.000Z","size":1810,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-08T05:31:07.949Z","etag":null,"topics":["apollo","authentication","graphql","nodejs","prisma","reactjs","unit-test"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IberaSoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2019-07-12T13:18:15.000Z","updated_at":"2024-12-21T13:43:54.000Z","dependencies_parsed_at":"2025-05-08T04:41:01.931Z","dependency_job_id":"695da495-b74c-4b7e-af98-bdc2b7083c44","html_url":"https://github.com/IberaSoft/reactjs-graphql-practice","commit_stats":{"total_commits":98,"total_committers":4,"mean_commits":24.5,"dds":"0.40816326530612246","last_synced_commit":"93f4d721e9c7c4c9f50e60bdc0a681d060f981e7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/IberaSoft/reactjs-graphql-practice","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IberaSoft%2Freactjs-graphql-practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IberaSoft%2Freactjs-graphql-practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IberaSoft%2Freactjs-graphql-practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IberaSoft%2Freactjs-graphql-practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IberaSoft","download_url":"https://codeload.github.com/IberaSoft/reactjs-graphql-practice/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IberaSoft%2Freactjs-graphql-practice/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28934639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T07:49:44.436Z","status":"ssl_error","status_checked_at":"2026-01-31T07:49:34.274Z","response_time":128,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["apollo","authentication","graphql","nodejs","prisma","reactjs","unit-test"],"created_at":"2024-11-07T06:08:41.581Z","updated_at":"2026-01-31T08:04:00.603Z","avatar_url":"https://github.com/IberaSoft.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React GraphQL E-Commerce Platform\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/rrg-logo.png\" alt=\"React GraphQL Practice\" width=\"200\"\u003e\n\u003c/p\u003e\n\nThis is a full-stack e-commerce application with a modern GraphQL architecture for learning purposes. Its showcases a production-ready app including type-safe resolvers, efficient data fetching, real-time subscriptions, and comprehensive error handling.\n\n## 🚀 Tech Stack\n\n### Backend\n- **GraphQL API**: Apollo Server 4.x with TypeScript\n- **Database**: PostgreSQL with Prisma 5.x ORM\n- **Authentication**: JWT-based auth with httpOnly cookies\n- **Payments**: Stripe integration\n- **Real-time**: GraphQL Subscriptions\n\n### Frontend\n- **Framework**: Next.js 15 with React 18\n- **GraphQL Client**: Apollo Client 3.x with React Hooks\n- **Styling**: Styled Components 6.x\n- **Type Safety**: TypeScript with GraphQL Code Generator\n\n### Infrastructure\n- **Containerization**: Docker \u0026 Docker Compose\n- **Deployment**: Vercel (frontend), Railway/Render (backend)\n- **Development**: Hot reload, type checking, linting\n\n## 📋 Features\n\n### GraphQL Implementation Highlights\n\n- **Schema-First Design**: Well-defined GraphQL schema with proper type definitions\n- **Efficient Resolvers**: Optimized database queries with Prisma, preventing N+1 problems\n- **Type Safety**: End-to-end type safety from database to frontend using TypeScript and code generation\n- **Error Handling**: Comprehensive error handling with GraphQL error extensions\n- **Authentication**: Secure JWT-based authentication with permission-based authorization\n- **Real-time Capabilities**: GraphQL subscriptions for live updates (cart, orders, etc.)\n- **Query Optimization**: Field-level resolvers with data loader pattern\n- **Input Validation**: Zod-based validation for mutations\n\n### Application Features\n\n- 🛍️ **Product Catalog**: Browse, search, and filter items with pagination\n- 🛒 **Shopping Cart**: Add/remove items with real-time updates\n- 💳 **Checkout**: Secure payment processing with Stripe\n- 👤 **User Management**: Registration, authentication, password reset\n- 🔐 **Role-Based Access**: Permission system (ADMIN, USER, ITEMCREATE, etc.)\n- 📦 **Order Management**: View order history and details\n- 🎨 **Modern UI**: Responsive design with smooth animations\n\n## 🏗️ Architecture\n\n### GraphQL Schema Design\n\nThe application follows a clean, modular GraphQL schema structure:\n\n```graphql\ntype Query {\n  items(where: ItemWhereInput, orderBy: ItemOrderByInput, skip: Int, first: Int): [Item]!\n  item(where: ItemWhereUniqueInput!): Item\n  itemsConnection(where: ItemWhereInput): ItemConnection!\n  me: User\n  users: [User]!\n}\n\ntype Mutation {\n  createItem(title: String, description: String, price: Int, image: String): Item!\n  updateItem(id: ID!, title: String, description: String, price: Int): Item!\n  deleteItem(id: ID!): Item\n  signup(email: String!, password: String!, name: String!): User!\n  signin(email: String!, password: String!): User!\n  addToCart(id: ID!): CartItem\n  removeFromCart(id: ID!): CartItem\n  createOrder(token: String!): Order!\n  # ... more mutations\n}\n```\n\n### Resolver Patterns\n\n- **Forwarding Resolvers**: Simple queries forwarded directly to Prisma\n- **Custom Resolvers**: Complex business logic with proper error handling\n- **Context-Based Auth**: User authentication via request context\n- **Permission Checks**: Field and operation-level permission validation\n\n### Database Schema\n\nPrisma schema with proper relationships:\n\n```prisma\nmodel User {\n  id              String      @id @default(uuid())\n  name            String\n  email           String      @unique\n  password        String\n  permissions     Permission[]\n  cart            CartItem[]\n  orders          Order[]\n  # ... more fields\n}\n\nmodel Item {\n  id          String   @id @default(uuid())\n  title       String\n  description String\n  price       Int\n  image       String?\n  user        User     @relation(fields: [userId], references: [id])\n  # ... more fields\n}\n```\n\n## 🛠️ Getting Started\n\n### Prerequisites\n\n- Node.js 20+ and npm/yarn\n- Docker and Docker Compose (for local development)\n- PostgreSQL (or use Docker)\n- Stripe account (for payments)\n\n### Local Development with Docker\n\n1. **Clone the repository**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd reactjs-graphql-practice\n   ```\n\n2. **Set up environment variables**\n   ```bash\n   cp backend/.env.example backend/.env\n   cp frontend/.env.example frontend/.env.local\n   ```\n   \n   Edit the `.env` files with your configuration:\n   - Database connection string\n   - JWT secret\n   - Stripe keys\n   - Email service credentials\n\n3. **Start services with Docker Compose**\n   ```bash\n   docker-compose up -d\n   ```\n   \n   This will start:\n   - PostgreSQL database\n   - GraphQL API server (port 4000)\n   - Frontend development server (port 3000)\n\n4. **Run database migrations**\n   ```bash\n   cd backend\n   npm run prisma:migrate\n   npm run prisma:generate\n   ```\n\n5. **Access the application**\n   - Frontend: http://localhost:3000\n   - GraphQL Playground: http://localhost:4000/graphql\n   - Prisma Studio: `npm run prisma:studio` (in backend directory)\n\n### Manual Setup (without Docker)\n\n1. **Backend Setup**\n   ```bash\n   cd backend\n   npm install\n   npm run prisma:generate\n   npm run dev\n   ```\n\n2. **Frontend Setup**\n   ```bash\n   cd frontend\n   npm install\n   npm run dev\n   ```\n\n## 📚 GraphQL Examples\n\n### Query Example\n\n```graphql\nquery GetItems($skip: Int, $first: Int) {\n  items(skip: $skip, first: $first, orderBy: createdAt_DESC) {\n    id\n    title\n    description\n    price\n    image\n    user {\n      name\n    }\n  }\n  itemsConnection {\n    aggregate {\n      count\n    }\n  }\n}\n```\n\n### Mutation Example\n\n```graphql\nmutation CreateItem($title: String!, $description: String!, $price: Int!) {\n  createItem(\n    title: $title\n    description: $description\n    price: $price\n  ) {\n    id\n    title\n    price\n  }\n}\n```\n\n### Authentication Example\n\n```graphql\nmutation SignIn($email: String!, $password: String!) {\n  signin(email: $email, password: $password) {\n    id\n    name\n    email\n    permissions\n  }\n}\n```\n\n## 🧪 Testing\n\n```bash\n# Backend tests\ncd backend\nnpm test\n\n# Frontend tests\ncd frontend\nnpm test\n\n# Run all tests\nnpm run test:all\n```\n\n## 🚢 Deployment\n\n### Frontend (Vercel)\n\n1. Connect your GitHub repository to Vercel\n2. Configure environment variables in Vercel dashboard\n3. Deploy automatically on push to main branch\n\n### Backend (Railway/Render)\n\n1. Connect your repository\n2. Set up PostgreSQL database\n3. Configure environment variables\n4. Deploy\n\n## 📖 GraphQL Best Practices Demonstrated\n\n1. **Schema Design**: Clear, intuitive schema with proper naming conventions\n2. **Resolver Efficiency**: Optimized queries with Prisma, avoiding N+1 problems\n3. **Error Handling**: Meaningful error messages with proper error codes\n4. **Type Safety**: End-to-end TypeScript types from schema to components\n5. **Security**: Authentication and authorization at resolver level\n6. **Performance**: Field-level resolvers, query complexity analysis\n7. **Documentation**: Self-documenting schema with descriptions\n8. **Testing**: Comprehensive test coverage for resolvers and components\n\n## 🔐 Security Features\n\n- JWT authentication with httpOnly cookies\n- Password hashing with bcrypt\n- Input validation and sanitization\n- Permission-based access control\n- CORS configuration\n- SQL injection prevention (Prisma)\n\n## 📝 Project Structure\n\n```\n.\n├── backend/              # GraphQL API server\n│   ├── src/\n│   │   ├── schema/      # GraphQL schema and resolvers\n│   │   ├── lib/         # Utilities (Prisma, auth, etc.)\n│   │   └── middleware/  # Express/Apollo middleware\n│   ├── prisma/          # Prisma schema and migrations\n│   └── Dockerfile\n├── frontend/            # Next.js application\n│   ├── src/\n│   │   ├── app/         # Next.js pages\n│   │   ├── components/  # React components\n│   │   ├── graphql/     # GraphQL queries/mutations\n│   │   └── lib/         # Utilities (Apollo Client, etc.)\n│   └── Dockerfile\n├── docker-compose.yml   # Local development setup\n└── README.md\n```\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 🎯 Learning Resources\n\nThis project is designed as a comprehensive GraphQL learning resource, demonstrating:\n\n- GraphQL schema design and best practices\n- Apollo Server setup and configuration\n- Prisma ORM integration with GraphQL\n- Apollo Client usage in React applications\n- Type-safe GraphQL development\n- Real-world authentication and authorization\n- Payment integration patterns\n- Testing GraphQL APIs and React components\n\n## 📧 Contact\n\nFor questions or feedback, please open an issue on GitHub.\n\n---\n\n**Built with ❤️ using GraphQL, React, and modern web technologies**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiberasoft%2Freactjs-graphql-practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiberasoft%2Freactjs-graphql-practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiberasoft%2Freactjs-graphql-practice/lists"}