initial

.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

.expo/settings.json

@@ -0,0 +1,3 @@
+{
+  "urlRandomness": "xIvsvTU"
+}

.gitignore

@@ -8,8 +8,6 @@ dist
 !.yarn/sdks
 !.yarn/versions
 
-# expo
-**/.expo/*
 
 # next.js
 **/.next/*

.prettierrc

@@ -1,7 +1,9 @@
 {
   "trailingComma": "es5",
-  "semi": false,
-  "singleQuote": true,
+  "semi": true,
+  "singleQuote": false,
   "arrowParens": "always",
-  "printWidth": 100
-}
+  "endOfLine": "auto",
+  "bracketSameLine": true,
+  "printWidth": 100 
+}

.yarnrc.yml

@@ -18,4 +18,4 @@ logFilters:
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.5.0.cjs
+yarnPath: .yarn/releases/yarn-3.5.1.cjs

README.md

@@ -1,104 +1,32 @@
-# Tamagui + Solito + Next + Expo Monorepo
+# News App
 
-```sh
-npm create tamagui
-```
-
-## 🔦 About
-
-This monorepo is a starter for an Expo + Next.js + Tamagui + Solito app.
-
-Many thanks to [@FernandoTheRojo](https://twitter.com/fernandotherojo) for the Solito starter monorepo which this was forked from. Check out his [talk about using expo + next together at Next.js Conf 2021](https://www.youtube.com/watch?v=0lnbdRweJtA).
-
-## 📦 Included packages
-
-- [Tamagui](https://tamagui.dev) 🪄
-- [solito](https://solito.dev) for cross-platform navigation
-- Expo SDK
-- Next.js
-- Expo Router
-
-## 🗂 Folder layout
-
-The main apps are:
-
-- `expo` (native)
-- `next` (web)
-
-- `packages` shared packages across apps
-  - `ui` includes your custom UI kit that will be optimized by Tamagui
-  - `app` you'll be importing most files from `app/`
-    - `features` (don't use a `screens` folder. organize by feature.)
-    - `provider` (all the providers that wrap the app, and some no-ops for Web.)
-
-You can add other folders inside of `packages/` if you know what you're doing and have a good reason to.
-
-> [!TIP]
-> Switching from `app` to `pages` router:
->
-> - remove `app` folder from `apps/next`
-> - move `index.tsx` from `pages-example` to `pages` folder
-> - rename `pages-example-user` to `user` and be sure to update `linkTarget` in `screen.tsx` to `user` as well
-> - delete `SwitchRouterButton.tsx` component and remove it from `screen.tsx` and `packages/ui/src/index.tsx`
-> - search for `pagesMode` keyword and remove it
-
-## 🏁 Start the app
-
-- Install dependencies: `yarn`
+## 🛠️ Stack
 
-- Next.js local dev: `yarn web`
+Next.js + Tamagui + Solito + Typescript + NewsAPI
 
-To run with optimizer on in dev mode (just for testing, it's faster to leave it off): `yarn web:extract`. To build for production `yarn web:prod`.
+## 🚀 Installation
 
-To see debug output to verify the compiler, add `// debug` as a comment to the top of any file.
+> [!CAUTION]
+> Use `yarn`
 
-- Expo local dev: `yarn native`
-
-## UI Kit
-
-Note we're following the [design systems guide](https://tamagui.dev/docs/guides/design-systems) and creating our own package for components.
-
-See `packages/ui` named `@my/ui` for how this works.
-
-## 🆕 Add new dependencies
-
-### Pure JS dependencies
-
-If you're installing a JavaScript-only dependency that will be used across platforms, install it in `packages/app`:
-
-```sh
-cd packages/app
-yarn add date-fns
-cd ../..
-yarn
+```bash
+yarn install
 ```
 
-### Native dependencies
+> [!IMPORTANT]
+> Add your [NewsAPI key](https://newsapi.org/account) `.env.local` to `apps/next` folder
+> (or just add it to `packages/ui/src/constants/constants.ts`):
+> `export const NEWS_API_KEY="YOUR_NEWS_API_KEY"`
 
-If you're installing a library with any native code, you must install it in `expo`:
+To start dev:
 
-```sh
-cd apps/expo
-yarn add react-native-reanimated
-cd ..
-yarn
+```bash
+cd apps/next && yarn run dev
 ```
 
-## Update new dependencies
-
-### Pure JS dependencies
-
-```sh
-yarn upgrade-interactive
-```
-
-You can also install the native library inside of `packages/app` if you want to get autoimport for that package inside of the `app` folder. However, you need to be careful and install the _exact_ same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use `lerna-update-wizard` to help with this (you don't need to use Lerna to use that lib).
-
-You may potentially want to have the native module transpiled for the next app. If you get error messages with `Cannot use import statement outside a module`, you may need to use `transpilePackages` in your `next.config.js` and add the module to the array there.
-
-### Deploying to Vercel
+## 📖 About
 
-- Root: `apps/next`
-- Install command to be `yarn set version stable && yarn install`
-- Build command: leave default setting
-- Output dir: leave default setting
+- The core functionality is handled by the `useArticles` hook, which fetches and manages article data from various categories. It implements features like pagination, deduplication, and debounced loading.
+- The `getNews` function handles API calls with caching for efficiency.
+- The `useBookmarkArticle` manages bookmarking functionality for news articles. It uses local storage to persist bookmarked articles across sessions. The hook checks if a given article is already saved, and provides a function to toggle its saved status. When the bookmark status changes, it updates both the local state and the storage.
+- The code is structured to separate data fetching from UI rendering.

apps/next/app/NextTamaguiProvider.tsx

@@ -1,23 +1,25 @@
-'use client'
+"use client";
 
-import '@tamagui/core/reset.css'
-import '@tamagui/font-inter/css/400.css'
-import '@tamagui/font-inter/css/700.css'
-import '@tamagui/polyfill-dev'
+import "@tamagui/core/reset.css";
+import "@tamagui/font-inter/css/300.css";
+import "@tamagui/font-inter/css/400.css";
+import "@tamagui/font-inter/css/700.css";
+import "@tamagui/font-inter/css/900.css";
+import "@tamagui/polyfill-dev";
 
-import { ReactNode } from 'react'
-import { StyleSheet } from 'react-native'
-import { useServerInsertedHTML } from 'next/navigation'
-import { NextThemeProvider, useRootTheme } from '@tamagui/next-theme'
-import { config } from '@my/ui'
-import { Provider } from 'app/provider'
+import { ReactNode } from "react";
+import { StyleSheet } from "react-native";
+import { useServerInsertedHTML } from "next/navigation";
+import { NextThemeProvider, useRootTheme } from "@tamagui/next-theme";
+import { config } from "@my/ui";
+import { Provider } from "app/provider";
 
 export const NextTamaguiProvider = ({ children }: { children: ReactNode }) => {
-  const [theme, setTheme] = useRootTheme()
+  const [theme, setTheme] = useRootTheme();
 
   useServerInsertedHTML(() => {
     // @ts-ignore
-    const rnwStyle = StyleSheet.getSheet()
+    const rnwStyle = StyleSheet.getSheet();
     return (
       <>
         <style dangerouslySetInnerHTML={{ __html: rnwStyle.textContent }} id={rnwStyle.id} />
@@ -35,7 +37,7 @@ export const NextTamaguiProvider = ({ children }: { children: ReactNode }) => {
             __html: config.getCSS({
               // if you are using "outputCSS" option, you should use this "exclude"
               // if not, then you can leave the option out
-              exclude: process.env.NODE_ENV === 'production' ? 'design-system' : null,
+              exclude: process.env.NODE_ENV === "production" ? "design-system" : null,
             }),
           }}
         />
@@ -49,25 +51,24 @@ export const NextTamaguiProvider = ({ children }: { children: ReactNode }) => {
 
         <style jsx global>{`
           html {
-            font-family: 'Inter';
+            font-family: "Inter";
           }
         `}</style>
       </>
-    )
-  })
+    );
+  });
 
   return (
     <NextThemeProvider
       skipNextHead
       // change default theme (system) here:
       // defaultTheme="dark"
       onChangeTheme={(next) => {
-        setTheme(next as any)
-      }}
-    >
+        setTheme(next as any);
+      }}>
       <Provider disableRootThemeClass defaultTheme={theme}>
         {children}
       </Provider>
     </NextThemeProvider>
-  )
-}
+  );
+};

apps/next/app/category/[id]/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { CategoryScreen } from "app/features/category/category-screen";
+
+export default function Page() {
+  return <CategoryScreen />;
+}

apps/next/app/favorites/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { FavoritesScreen } from "app/features/favorites/favorites-screen";
+
+export default function Page() {
+  return <FavoritesScreen />;
+}

apps/next/app/latest/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { LatestNewsScreen } from "app/features/latest/latest-news-screen";
+
+export default function Page() {
+  return <LatestNewsScreen />;
+}

apps/next/app/layout.tsx

@@ -1,19 +1,22 @@
-import { Metadata } from 'next'
-import { NextTamaguiProvider } from './NextTamaguiProvider'
+import { Metadata } from "next";
+import { NextTamaguiProvider } from "./NextTamaguiProvider";
+import { PageLayout } from "@my/ui";
 
 export const metadata: Metadata = {
-  title: 'Tamagui • App Router',
-  description: 'Tamagui, Solito, Expo & Next.js',
-  icons: '/favicon.ico',
-}
+  title: "News",
+  description: "News app - Next.js, Solito, Tamagui, NewsAPI",
+  icons: "/favicon.ico",
+};
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     // You can use `suppressHydrationWarning` to avoid the warning about mismatched content during hydration in dev mode
     <html lang="en" suppressHydrationWarning>
       <body>
-        <NextTamaguiProvider>{children}</NextTamaguiProvider>
+        <NextTamaguiProvider>
+          <PageLayout>{children}</PageLayout>
+        </NextTamaguiProvider>
       </body>
     </html>
-  )
+  );
 }

apps/next/app/page.tsx

@@ -1,5 +1,5 @@
-'use client'
+"use client";
 
-import { HomeScreen } from 'app/features/home/screen'
+import { HomeScreen } from "app/features/home/screen";
 
-export default HomeScreen
+export default HomeScreen;

apps/next/app/search/[id]/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SearchScreen } from "app/features/search/search-screen";
+
+export default function Page() {
+  return <SearchScreen />;
+}

apps/next/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.