Code Monkey home page Code Monkey logo

code-kathan-2345's Introduction

# Project Title KATHAN_NEWS ## Introduction Introducing Kathan News,built for masai construct week block 34 . An innovative online news application offering seamless access to the latest headlines. With user-friendly features including robust registration and authentication, responsive design, and intuitive search capabilities, Kathan News provides an immersive news browsing experience for users worldwide. ## Project Type Frontend ## Deplolyed App Frontend: https://kathan-news.netlify.app/
Backend: https://code-kathan-api.vercel.app ## Directory Structure ```bash code-kathan-2345 ├── backend/ │ └── .gitignore │ └── .prettierrc │ ├── api/ │ │ └── server.js │ └── db.json │ └── package-lock.json │ └── package.json │ └── vercel.json ├── frontend/ │ └── .gitignore │ └── .prettierrc │ └── README.md │ └── package-lock.json │ └── package.json │ ├── public/ │ │ └── favicon.ico │ │ └── index.html │ │ └── logo192.png │ │ └── logo512.png │ │ └── manifest.json │ │ └── robots.txt │ ├── src/ │ │ └── .prettierrc │ │ └── App.css │ │ └── App.test.tsx │ │ └── App.tsx │ │ ├── assets/ │ │ │ └── .dummy │ │ ├── components/ │ │ │ └── .dummy │ │ ├── context/ │ │ │ └── .dummy │ │ ├── hooks/ │ │ │ └── .dummy │ │ └── index.css │ │ └── index.tsx │ │ └── logo.svg │ │ ├── pages/ │ │ │ └── .dummy │ │ │ ├── Admin/ │ │ │ │ └── Admin.tsx │ │ │ ├── Login/ │ │ │ │ └── Login.tsx │ │ │ ├── buisness/ │ │ │ │ └── Buisness.tsx │ │ │ ├── culture/ │ │ │ │ └── Culture.tsx │ │ │ ├── earth/ │ │ │ │ └── Earth.tsx │ │ │ ├── home/ │ │ │ │ └── Home.tsx │ │ │ ├── innovation/ │ │ │ │ └── Innovation.tsx │ │ │ ├── news/ │ │ │ │ └── News.tsx │ │ │ ├── searchPage/ │ │ │ │ └── SearchPage.tsx │ │ │ ├── signup/ │ │ │ │ └── Signup.tsx │ │ │ ├── sports/ │ │ │ │ └── Sports.tsx │ │ │ ├── travel/ │ │ │ │ └── Travel.tsx │ │ │ ├── video/ │ │ │ │ └── Video.tsx │ │ └── react-app-env.d.ts │ │ ├── redux/ │ │ │ └── .dummy │ │ └── reportWebVitals.ts │ │ ├── routes/ │ │ │ └── .dummy │ │ │ └── Allroutes.tsx │ │ │ └── ProtectedRoutes.tsx │ │ └── setupTests.ts │ │ ├── utils/ │ │ │ └── .dummy │ │ │ ├── baseUrl/ │ │ │ │ └── index.ts │ │ │ ├── layoutRoute/ │ │ │ │ └── index.ts │ └── tsconfig.json └── package.json └── .DS_Store └── .gitignore └── README.md ``` ## Video Walkthrough of the project [Project Presentation Video](https://youtu.be/a-GFdCgTQms) ## Features - User and admin registration and authentication functionality - Responsive design for seamless user experience across devices - User profile creation and management - Search functionality to easily find desired news articles - Scroll-to-top feature for convenient navigation - admin dashboard displays metrics of user distribution across the globe , total clicks reseived on the website and other key information - ability for the admin to perform crud on news articles and users ## design decisions or assumptions At Kathan News, we're committed to delivering an exceptional user experience that seamlessly combines aesthetic appeal with functionality. To achieve this goal, we've implemented two key features: an attractive user interface with toggling theme and interactive toast functionality. Intuitive Theming for Enhanced Visual Experience Design Goal: Our primary objective is to offer users a visually engaging experience that aligns with their preferences and surroundings. Solution: We've integrated a sleek theming system that allows users to effortlessly switch between light and dark modes. Whether users prefer a brighter interface for daytime browsing or a darker one for nighttime reading, they can easily toggle between the two options with a simple click. ## Installation & Getting started Detailed instructions on how to install, configure, and get the project running. ```bash clone the repo cd into Code-kathan-2345 npm run install npm run start_fe to start the frontend ``` ## Usage Provide instructions and examples on how to use your project. ```bash npm install npm run start_fe npm run start_be ``` #### Light Mode [![light theme](./frontend/src//assets/img1.png)](<[link_url](https://code-kathan.vercel.app/)>) #### Dark Mode [![dark theme](./frontend/src//assets/img2.png)](<[link_url](https://code-kathan.vercel.app/)>) #### Light Theme ## Credentials Admin Credentials ```bash email- [email protected] password- admin ``` User Credential ```Bash email- [email protected] password- password ``` ## API Endpoints GET /posts - retrieve all items POST /posts - create a new item PATCH /posts/:id - Patch an item DELETE /posts/:id - Delete an item POST /sign - sign in a user POST /register - create a user account PATCH /users/id - Patch a user DELETE /users/id - Delete a user ## Technology Stack - React - TypeScript - Chakra UI - Axios - Google Charts - JSON server # Kathan-News # Kathan-News

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.